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();
} );