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

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

我有表，我使用的數據表，以便對列進行排序。我有一個while循環產生下面的單元格。DataTables：按列排序表，固定i ++值？

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

＃在循環中遞增i ++。 DataTable的'nosort'工作正常，我不能點擊＃。但是，例如，當我單擊Name時，我想按Name排序列，會發生以下情況。

# | 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' }] 
});

來源

2016-02-12 DxDogo

您可以分享您嘗試過的以及您遇到的問題嗎？ –

http://legacy.datatables.net/usage/options#aaSortingFixed可能會幫助 –

我會用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()方法節省時間。

來源

2016-02-12 18:20:31 davidkonrad

謝謝。它按照預期工作在jsfiddle上，但我沒有設法使它與我自己的代碼不幸地工作。這是我的不好之處，因爲在查找DataTable之前，我對jQuery沒有任何經驗。 – DxDogo

@DxDogo，你在控制檯中是否有任何錯誤，等等......？ – davidkonrad

終於我得到它的工作，它工作得很好。謝謝！ – DxDogo

SOLUTION

參見如何添加索引列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();

DEMO

見this jsFiddle代碼和演示。

來源

2016-02-13 18:14:13

謝謝。如果我想擺脫搜索並將所有內容全部顯示在一個頁面中，而不是每頁10個，我需要如何更改它？查看我編輯的第一篇文章以獲取當前代碼 – DxDogo

@DxDogo，使用'searching：false'來禁用搜索和'paging：false'來禁用分頁。 –

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

回答

相關問題