JQuery DataTables显示行号及连续自动编号

在建立表格的时候，为了方便阅读，我们可能需要简历 行号列，JQuery DataTables 如何自动创建行号列呐？

首先推一篇 官网博文：http://datatables.club/blog/2016/07/10/add-index-for-table.html
其实官网好多实例，理解要比我深，我还是停留在参考官网文档，进行自己修改的层面。

首先我们介绍一下从 服务端获取数据，而后使用 JQuery DataTables 自动编号。下面是几种思路：

1. 服务端模式下客户端 编号

代码：

dtconfig.ajax = {      url: "/Action/GetNewLouPanList.ashx",      type: "POST",  };dtconfig.columns = [       { name: "Checkbox","searchable": false, "orderable": false  },       //此处要预留一列给编号，视图同样也要给编号预留一列       { name: "SerialNum", data: "Id", "searchable": false, "orderable": false },       { name: "Id", data: "Id" },       //...  ];  var page_dt = $('#datatable').DataTable(dtconfig);//初始化 DataTables// .draw.dt 是 DataTables 的绘制事件，监听绘制事件，绘制的时候给 datatales 编号。  page_dt.on('draw.dt', function () {      //给第一列编号      page_dt.column(1, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {          cell.innerHTML = i + 1;      });  });

视图：

  <table id="datatable" class="table table-striped _icheck" style="width:100%;">    <thead>          <tr class="headings">              <th>选中</th>              <th>行号</th>              <th>问题ID</th>            <!--...此处省略其他列，大家懂就可以了-->          </tr>      </thead>      <tbody></tbody>   </table>

效果：

备注： 服务端模式下，大家一定要 监听 draw.dt（绘制事件），如果模仿的英文文档，监听 order.dt search.dt 会导致请求两次的。不要监听 order.dt search.dt（搜索，排序事件）

有的同学，可能在官网上看到的是这篇博文：https://datatables.net/examples/api/counter_columns.html， 这篇博文是用于 客户端模式下的。

没错！ JQuery DataTables 插件的中英文档，我已经翻了好多遍了，常用的，我都翻过了，实例我也都亲测过了，写出来的这些都是我爬过的坑。

2. 分页连续序号

还有一种需求，那就是我们分页之后， 页码需要连续， 那么大家可以参考 ：我上面发的链接中的博文，那里面有介绍，本篇博文侧重介绍 单页 编号。

//添加序号//不管是排序，还是分页，还是搜索最后都会重画，这里监听draw事件即可table.on('draw.dt',function() {  table.column(0, {         search: 'applied',         order: 'applied'     }).nodes().each(function(cell, i) {         //i 从0开始，所以这里先加1         i = i+1;         //服务器模式下获取分页信息，使用 DT 提供的 API 直接获取分页信息         var page = table.page.info();         //当前第几页，从0开始         var pageno = page.page;         //每页数据         var length = page.length;         //行号等于 页数*每页数据长度+行号         var columnIndex = (i+pageno*length);         cell.innerHTML = columnIndex;     }); });

3. 服务端编号

服务端编号，没有什么好说的，就是 直接在服务端编号，发送到客户端，客户端直接显示就可以了。

4. 客户端模式下自动编号

我们使用客户端模式时（数据来源于本地），代码如下：

官网文档：https://datatables.net/examples/api/counter_columns.html

$(document).ready(function() {    var t = $('#example').DataTable( {        "columnDefs": [ {            "searchable": false,            "orderable": false,            "targets": 0        } ],        "order": [[ 1, 'asc' ]]    } );    t.on( 'order.dt search.dt', function () {        t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {            cell.innerHTML = i+1;        } );    } ).draw();} );