jQuery - 第三方表格插件DataTables使用详解14（自动添加行号）

2018-04-03 发布：hangge 阅读：1549

二十五、自动添加行号

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

1，效果图

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

（2）翻页后序号也会随之变化。

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

2，样例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.1.1.js"  type="text/javascript"></script>
    <script src="media/js/jquery.dataTables.js"  type="text/javascript"></script>
    <link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" />
    <script type="text/javascript">
      $(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();
      });
    </script>
  </head>
  <body>
    <table id="myTable">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>出生日期</th>
            </tr>
        </thead>
    </table>
  </body>
</html>

数据文件（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"
            }
  ]
}