datatables 重新生成序号_jQuery - 第三方表格插件DataTables使用详解14（自动添加行号）...

二十五、自动添加行号

有时我们会希望表格能自动在每行数据的前面增加行序号，这样可以更方便地查看数据。下面通过样例演示这个功能如何实现。

1，效果图

(1)原始的数据只有两列，我们在最前面又插入一个序号列，里面的序号是自动生成的。

(2)翻页后序号也会随之变化。

(3)注意序号不是和数据绑定的。也就是说不管是搜索还是排序后，虽然里面数据顺序发生了变化，但序号仍然是不变的。

2，样例代码

$(document).ready(function() {

//获取表格Api对象

var table = $('#myTable').DataTable({

"ajax": "data.txt",

"pageLength": 5,

"columnDefs": [{

"searchable": false,

"orderable": false,

"targets": 0 //序号列不能排序也不能搜索

}],

"columns": [

{ data: null},

{ data: 'name'},

{ data: 'birthday'}

],

"order": [[ 1, 'asc' ]] //默认按姓名列排序

});

//自动给第一列设置行号

table.on('order.dt search.dt', function () {

table.column(0, {search:'applied', order:'applied'}).nodes().each(

function (cell, i) {

cell.innerHTML = i+1;

}

);

}).draw();

});

序号姓名出生日期

数据文件(data.txt)如下：

{

"data": [

{

"name": "张三",

"birthday": "2015-12-31"

},

{

"name": "李四",

"birthday": "2001-11-31"

},

{

"name": "王五",

"birthday": "2011-12-31"

},

{

"name": "王五",

"birthday": "2010-01-01"

},

{

"name": "赵六",

"birthday": "2100-06-31"

},

{

"name": "赵七",

"birthday": "2011-12-31"

},

{

"name": "赵八",

"birthday": "2008-08-08"

},

{

"name": "赵九",

"birthday": "2042-04-08"

}

]

}