JQuery DataTables中关于行号显示的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 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();
} );