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

Я создаю таблицу 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"]
] }

Где "Title One" или "Title Four" и т.д., будет ссылкой на страницу этого комикса. По общему признанию, у меня не так много способов отрубов с dataTables, поэтому, если вы можете быть явным в своем решении, это было бы хорошо оценено.

Ответы

Ответ 1

вы должны использовать опцию 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;
        },
});

Ответ 2

Вы также можете использовать 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 data object, and 'data' is this column data
         // e.g. 'full[0]' is the comic id, and 'data' is the comic title
         return '<a href="/comics/' + full[0] + '">' + data + '</a>';
       }
     }
   ]
});

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

Ответ 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;
        },
});

Ответ 4

Ниже, это то, что я сделал, чтобы изменить текст 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);

Ответ 5

Если использование последней версии v1.10.16 может использовать render function обратный вызов.

$('#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>';
}

Ответ 6

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

Я хотел показать 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>';
   }
}
...

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