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，顯示在頁面上的結果

column3	column1	column4	column0

以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使用的話，記得先做轉換處理。

巴特西

dataTable.NET的column index的不同定義

最新文章

热门文章