版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/maydaysar/article/details/85233717
DataTables是一个非常好用的表格插件,关于它的行号显示的方法可分为两种,第一种是知道表头,可以在columns中添加即可;第二种是不知道表头,这时候就不能用第一种简单的办法啦。
- 方法 一
知道表头,可以直接在columns中添加
$('#example').dataTable({
columns: [
//行号
{
"data":null,
render: function (data, type, row, meta) {
return meta.settings._iDisplayStart + meta.row + 1;
}
},
//表头
{
...
},
{
...
}
- 方法二
这种方法在DataTables官网中也有介绍,但是会出现显示Object的情况,原来是缺少了draw.dt,它是DataTables的绘制事件,用来监听绘制事件。把官网的例子修改一下就能正常显示行号了。
$(document).ready(function() {
var t = $('#example').DataTable( {
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": 0
} ],
"order": [[ 1, 'asc' ]]
} );
t.on( 'draw.dt order.dt search.dt', function () {
t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
} );