開源的Table控件DataTables

DataTables

DataTables 是一個 jQuery 的表格插件。

這是一個高度靈活的工具，對任何 HTML 表格，提供高級的交互控制功能。

官方網站：http://www.datatables.net/

使用方式

這裏採用的是 Server-Side 方式，其餘的方式能夠自行閱讀文檔。

見連接：http://www.datatables.net/examples/data_sources/server_side.html

前端頁面

<link rel="stylesheet" type="text/css" href="./jquery.dataTables.min.css">
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    jQuery('#dyntable').dataTable({
        "bPaginate": true, //支持分頁
        "bStateSave": true,
        "aLengthMenu": [[50, 100, 150, 200], [50, 100, 150, 200]], //每頁顯示數量，相似於key => value，一一對應。
        "sPaginationType": "full_numbers",
        "sInfoEmtpy": "沒有數據",
        "sInfo": "顯示 _START_ 至 _END_ 條 &nbsp;&nbsp;共 _TOTAL_ 條",
        "oLanguage": {
            "sProcessing":   "處理中...",
            "sLengthMenu":   "顯示 _MENU_ 項結果",
            "sZeroRecords":  "沒有匹配結果",
            "sInfo":         "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
            "sInfoEmpty":    "顯示第 0 至 0 項結果，共 0 項",
            "sInfoFiltered": "(由 _MAX_ 項結果過濾)",
            "sInfoPostFix":  "",
            "sSearch":       "搜索:",
            "sUrl":          "",
            "sEmptyTable":     "表中數據爲空",
            "sLoadingRecords": "載入中...",
            "sInfoThousands":  ",",
            "oPaginate": {
                "sFirst":    "首頁",
                "sPrevious": "上頁",
                "sNext":     "下頁",
                "sLast":     "末頁"
            },
            "oAria": {
                "sSortAscending":  ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        "bProcessing": true,
        "bServerSide": true, //採用經過服務器獲取數據的方式
        "sAjaxSource": "./ajaxGetList.php" //動態請求腳本
    });
});
</script>

服務端腳本

須要處理這些參數，而且生成 Json 數據，返回給前端頁面。

iDisplayStart：偏移量

iDisplayLength：返回限制的記錄數

iTotalRecords：總記錄數

iTotalDisplayRecords：展現的總記錄數

sEcho：頁面自動傳的，不用管，直接返回便可。

aaData：返回的數據記錄。

返回Json數據

{
  "sEcho": 1,
  "iTotalRecords": 57,
  "iTotalDisplayRecords": 57,
  "aaData": [
    [
      "Airi",
      "Satou",
      "Accountant",
      "Tokyo",
      "28th Nov 08",
      "$162,700"
    ],
    [
      "Angelica",
      "Ramos",
      "Chief Executive Officer (CEO)",
      "London",
      "9th Oct 09",
      "$1,200,000"
    ],
    [
      "Ashton",
      "Cox",
      "Junior Technical Author",
      "San Francisco",
      "12th Jan 09",
      "$86,000"
    ],
    [
      "Bradley",
      "Greer",
      "Software Engineer",
      "London",
      "13th Oct 12",
      "$132,000"
    ],
    [
      "Brenden",
      "Wagner",
      "Software Engineer",
      "San Francisco",
      "7th Jun 11",
      "$206,850"
    ],
    [
      "Brielle",
      "Williamson",
      "Integration Specialist",
      "New York",
      "2nd Dec 12",
      "$372,000"
    ],
    [
      "Bruno",
      "Nash",
      "Software Engineer",
      "London",
      "3rd May 11",
      "$163,500"
    ],
    [
      "Caesar",
      "Vance",
      "Pre-Sales Support",
      "New York",
      "12th Dec 11",
      "$106,450"
    ],
    [
      "Cara",
      "Stevens",
      "Sales Assistant",
      "New York",
      "6th Dec 11",
      "$145,600"
    ],
    [
      "Cedric",
      "Kelly",
      "Senior Javascript Developer",
      "Edinburgh",
      "29th Mar 12",
      "$433,060"
    ]
  ]
}

表格效果圖

上下箭頭，能夠點擊進行排序。

具體排序的實現，能夠參考文檔。