DataTables：按列排序表，固定 i++ 值？

Question

<thead>
 <tr>
  <th class="nosort">#</th>
  <th>Name</th>
  <th>Age</th>
  <th>Location</th>
 </tr>
</thead>

我有表，我正在使用 DataTables 对列进行排序。我有一个生成以下单元格的 while 循环。

# |  Name  | Age| Location
----------------------------
1 | Donald | 37 | Sidney
2 | Janice | 54 | London
3 | Alice  | 44 | California

# 在循环中递增 i++。 DataTables 的“nosort”工作正常，我无法单击#。但是，例如，当我单击名称时，我想按名称对列进行排序，会发生以下情况。

# |  Name  | Age| Location
----------------------------
3 | Alice  | 44 | California
1 | Donald | 37 | Sidney
2 | Janice | 54 | London

如您所见，# 根据名称“更改”。我希望修复使用 i++ 创建的 # 列，仅显示位置，这样当我按名称或年龄排序时它不会改变。我怎样才能做到这一点？

编辑：我当前的代码

$('#example').dataTable({
   "paging": false,
   "info": false,
   "bFilter":  false,
   "order": [[ 1, "asc" ]],
"columnDefs": [{ "targets": 'nosort' }]
});

Answer 1

我会使用drawCallback 来做到这一点：

..
drawCallback: function() {
  $('#example tbody tr').each(function(i, tr) {
    tr.children[0].textContent = i+1;
  })
}
..

演示 -> http://jsfiddle.net/hr8fy3vw/

由于栏目内容一直被重置，无需通过API。此外，当使用 jQuery 迭代 <tr> 的唯一 可见 行时，将被处理 - 与使用 API 的 every() 和 each() 方法相比节省时间。

Answer 2

解决方案

如何添加索引列见Index column文章。

使用下面的代码并将example 更改为您的表ID。

var table = $('#example').DataTable();

table.on( 'order.dt search.dt', function () {
    table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
    } );
} ).draw();    

演示

有关代码和演示，请参阅this jsFiddle。