dataTable.NET的column index的不同定義

dataTable.NET是一個jQuery的plug in 第三方的library, 用來實現web page中table的interaction controls, 另外最近有在用的還有Telerik UI的RadGrid(action需要postback).

dataTable.NET可以通過簡單的setting，使已經define好的table columns調整顯示的順序或是隱藏，還可以對單個或多個columns進行sort.

在使用過程中有遇到一些有趣的狀況。

<table id="test-listing">
  <thead>
    <tr>
      <th>column0</th>
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
      <th>column4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      ...
    </tr>
    ...
  </tbody>
</table>

以上面的table為例，當需要在顯示時對columns重新排序，並且隱藏某些columns時

$('#test-listing').DataTable({
    paging: false,
    ordering: true,
    fixedHeader: true,
    columnDefs: [3,1,4,2,0],
    colReorder: {
        order: [{"visible":false, "target":2}],
        enable: false
    },
    "search": {
        "search": "xxxx"
    },
    order: [[4, "asc"]],
    "dom":
          "<'row'f>" +
          "<'row dt-table'" +
          "<'sixteen wide column'tr>" +
          ">" +
          "<'row'i>"
});

上面的setting，顯示在頁面上的結果

以column4升序排列。在setting中用到index為初始在頁面中定義的column的index。

當table已經load結束，可以使用下面的方法獲取當前的排序:

var table = $('#test-listing').dataTable();
var currentSort = table.fnSettings().aaSorting;

得到的sort會是以當前顯示的colums的index為準，[[2, “asc”]]

如果需要將抓到的當前sort存至cookie，下次頁面顯示時做為setting使用的話，記得先做轉換處理。