数据表.修复第一列,使其不可排序



我有一个数据表。第一列是位置,是一个增量,因此示例有 1、2、3、4。显示行所在的位置。我希望其余列可排序。因此,当按作业数或总值排序时,第一列保持不变,但其余列会发生变化。

我尝试使用固定列,但这不是我想要的。

<table class="datatable">
<thead>
<tr>
<th>Position</th>
<th class="no-sort">Name</th>
<th class="no-sort">Jobs</th>                                  
<th class="no-sort">Labour</th>
<th class="no-sort">Total</th>
</tr>
</thead>
@{int count = 1;}
@foreach (Model make in Model.Models)
{
<tr>
<td>@(count)</td>
<td>@make.Name</td>
<td>@make.Jobs</td>
<td>@Math.Round(make.Labour, 2)</td>
<td>@Math.Round(make.Total, 2)</td>
</tr>
{ count++; }
}
</table>

var Table = $('.datatable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bScrollCollapse": true,
"bFilter": false, "bInfo": false,
"aaSorting": [[2, 'desc']],
"columnDefs": [ {
"targets": 'no-sort',
"orderable": false,
} ],
"aoColumns": [
{ "bSearchable": false },
{ "bSearchable": false },
{ "bSearchable": false },
{ "bSearchable": false },
{ "bSearchable": false },
{ "bSearchable": false }
]
});

您可以通过添加包含表中每行位置的Counter Column来实现此功能。每当在数据表上执行searchingordering操作时,都需要动态添加它。

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

请参阅此示例进行演示。

JSFiddle Demo

请在数据表代码中尝试此操作:

"columnDefs": [
{ "orderable": false, "targets": 0 }
]

最新更新