如何使用jQuery DataTables

时间:2015-09-25 09:08:28

标签: datatables

我将一些Ajax数据读入jQuery DataTables。问题是我需要将第一列中的数据转换为超链接。与<td><a href = "5555.html">5555</a></td>中一样。

我的JSON数据:

{
   "data": [
      ["5555","07/17/2010","RCC Saturday Open","E10","Harris, Fred","1900","Nikolayev, Igor (FM)","2367","1-0"],
      ["5554","07/17/2010","RCC Saturday Open","B01","Nikolayev, Igor (FM)","2367","Motroni, Richard","1728","1-0"]
   ]
}

JavaScript的:

$(document).ready(function() {
   $('#cccr').DataTable( {
      "render": function ( data, type, row ) {
         return '<a href="basic.php?game=' + data + '></a>'; //doesn't work
      },
      "ajax": 'games.json',
      "deferRender": true
   } );
} );

我对JavaScript知之甚少。在谷歌搜索datatables.net网站几个小时后,我无法弄明白。

有人可以帮忙吗?

2 个答案:

答案 0 :(得分:13)

原因

选项render应该是columnscolumnDefs的子属性。

使用columnDefs.render选项动态显示单元格中的超链接。

例如:

var table = $('#cccr').DataTable({
    /* ... skipepd other options ... */
    columnDefs: [
        {
            targets: 0,
            render: function ( data, type, row, meta ) {
                if(type === 'display'){
                    data = '<a href="basic.php?game=' + encodeURIComponent(data) + '">' + data + '</a>';
                }

                return data;
            }
        }
    ]      
});

样本

请参阅this jsFiddle以获取代码和演示。

答案 1 :(得分:-1)

通过render option配置列定义:

"render": function ( data, type, row ) {
  return '<a href="#">' + data + '</a>';
}