Я хочу создать ссылки в полях записи в DataTables из данных JSON

Question

Я создаю таблицу dataTables для использования в качестве архива страниц для сайта, который создает комикс. На этой странице архивов я бы хотел, чтобы заголовок комикса был ссылкой на страницу этого комикса.

Инициализация:

    <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
            $('#example').dataTable( {
            "bProcessing": true,
            "sAjaxSource": "archive/archive.txt"
    } ); 
} );

        </script>

HTML:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th width="20%">Author</th>

            <th width="25%">Title</th>
            <th width="25%">Episode</th>
            <th width="15%">Date</th>
            <th width="15%">Tags</th>
        </tr>
    </thead>
    <tbody>


    </tbody>

</table>

Данные JSON:

{ "aaData": [
    ["Bob","Title One","Episode 1","9/30/2010","tag1,tag2,tag3"],
    ["Bob","Title One","Episode 2","10/2/2010","tag1,tag2,tag3"],
    ["Bob","Title One","Episode 3","10/4/2010","tag1,tag2,tag3"],
    ["Bob","Title Four","Episode 1","10/8/2010","tag1,tag2,tag3"],
    ["Bob","Title Five","Episode 1","10/11/2010","tag1,tag2,tag3"],
    ["Bob","Title Six","Episode 1","10/12/2010","tag1,tag2,tag3"],
    ["Kevin","Title Seven","Episode 1","10/15/2010","tag1,tag2,tag3"],
    ["Kevin","Title Eight","Episode 1","10/17/2010","tag1,tag2,tag3"],
    ["Kevin","Title Eight","Episode 2","10/20/2010","tag1,tag2,tag3"],
    ["Kevin","Title Ten","Episode 1","10/22/2010","tag1,tag2,tag3"],
    ["Kevin","Title Eleven","Episode 1","10/23/2010","tag1,tag2,tag3"],
    ["Kevin","Title Twelve","Episode 1","10/24/2010","tag1,tag2,tag3"]
] }

Где «Заголовок первый» или «Заголовок четвертый» и т. Д. - ссылка на страницу этого комикса Надо признать, что у меня не так уж много шуток с dataTables, так что, если вы явно заявите о своем решении, это будет оценено.

Answer 1

Вы также можете использовать функцию mRender с aoColumnDefs:

$('#example').dataTable({
  "bProcessing": true,
  "bServerSide": true,
  "sAjaxSource": "archive/archive.txt",
  "aoColumnDefs": [            
     {
       "aTargets": [ 2 ], // Column to target
       "mRender": function ( data, type, full ) {
         // 'full' is the row's data object, and 'data' is this column's data
         // e.g. 'full[0]' is the comic id, and 'data' is the comic title
         return '<a href="/comics/' + full[0] + '">' + data + '</a>';
       }
     }
   ]
});

Это более явно и, вероятно, более легко обслуживаемо, потому что вы можете указатькак отдельные столбцы отображаются на уровне столбцов, а не выбираются с помощью DOM на уровне строк, что помогает при добавлении столбцов позднее.

Answer 2

Вы должны использовать опцию fnRowCallback, см. документацию .

$('#example').dataTable({
     "bProcessing": true,
     "bServerSide": true,
     "sAjaxSource": "archive/archive.txt",
     "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            $('td:eq(2)', nRow).html('<a href="view.php?comic=' + aData[2] + '">' +
                aData[2] + '</a>');
            return nRow;
        },
});

Answer 3

$('#example').dataTable({
     "bProcessing": true,
     "bServerSide": true,
     "sAjaxSource": "archive/archive.txt"
     "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            $('td:eq(2)', nRow).html('<a href="view.php?comic=' + aData[2] + '">' +
                aData[2] + '</a>');
            return nRow;
        },
});

Answer 4

Я не мог получить ни одного ответа, чтобы выполнить то, что я пытался сделать.

Я хотел показать DisplayedColumn в столбце данных, но при щелчке по нему был отправлен идентификатор с запросом. Я также не хотел отображать столбец ID.

Вот как я этого добился:

columns: [
  { "data": "ID", "visible" : false },
  { "data": "DisplayedColumn" },
...
columnDefs: [ {
  targets: [1],
  "render": function (data, type, row, meta) {
     return '<a href="/Area/Controller/Action/' + row.ID + '">' + data + '</a>';
   }
}
...

К сожалению, было очень трудно найти ответ, который сработал для меня, надеюсь, он кому-нибудь поможет.

Answer 5

Если используется последняя версия v1.10.16, можно использовать render функцию обратный вызов.

$('#example').dataTable({
   "data": responseObj,
   "columns": [
      { "data": "information" }, 
      { 
         "data": "weblink",
         "render": function(data, type, row, meta){
            if(type === 'display'){
                data = '<a href="' + row.myid + '">' + data + '</a>';
            }
            return data;
         }
      } 
   ]
});

Я только что изменил функцию рендеринга .data относится только к текущим данным столбца, а объект row относится ко всей строке данных.Следовательно, мы можем использовать это для получения любых других данных для этой строки.

Если вы хотите создать ссылку на основе значения текущего столбца, можете использовать

if(type === 'display'){
    data = '<a href="' + data + '">' + data + '</a>';
}

Answer 6

Ниже я сделал, чтобы получить измененный HTML-текст в ячейке столбца, учитывая определенное значение в массиве объекта aaData.Это работает, но кажется ужасным, потому что HTML-разметка находится в JavaScript, как указано выше.

var dataTableMeta = { "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": url
                                , "aoColumns": aoColumns
                                , "fnServerData": function (sSource, aoData, fnCallback) {
                                    $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success": fnCallback,
                                        'dataFilter': function (data, type) {
                                            var jsObject = jQuery.parseJSON(data);
                                            for (var i = 0; i < jsObject.aaData.length; i++) {
                                                jsObject.aaData[i].CaseID = '<a href="" >' + jsObject.aaData[i].CaseID + '</a>';
                                            }
                                            var jsonString = JSON.stringify(jsObject);
                                            return jsonString;
                                        }
                                    });
                                }
        };

        $('#caseSearchTable').dataTable(dataTableMeta);