DataTables 配置和使用

WEB後臺開發，若是用的是Bootstrap框架，那這個表格神器你必定不要錯過。

官方地址：https://datatables.net/

What？英文很差，不要緊咱有中文的 http://datatables.club/ 

不過我仍是建議看英文的，由於比較全面雖然訪問的速度慢點，終歸能進的去。閒話不過說，先來個小例子吧。

1.先引用一下腳本地址，最好版本是一致的

<link rel="stylesheet" href="dataTables.bootstrap.min.css">
<script src="jquery.dataTables.min.js"></script> 
<script src="dataTables.bootstrap.min.js"></script> 

2.配置一下本地化

"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": "末頁",
        "sJump": "跳轉"
    },
    "oAria": {
        "sSortAscending": ": 以升序排列此列",
        "sSortDescending": ": 以降序排列此列"
    }
},

 　　寫到這裏要說一句，上邊這段本地化配置，有沒有發現它的命名挺奇怪的，前邊都有一個小寫的o、s之類的，可是如今官網並不這樣命名了，固然這並不影響咱們使用它，下邊是比較新的配置參數。

language: {
    "decimal": "",
    "emptyTable": "No data available in table",
    "info": "當前顯示第 _START_ 至 _END_ 項，共 _TOTAL_ 項。",
    "infoEmpty": "當前顯示第 0 至 0 項，共 0 項",
    "infoFiltered": "(由 _MAX_ 項結果過濾)",
    "infoPostFix": "",
    "thousands": ",",
    "lengthMenu": "每頁 _MENU_ 項",
    "loadingRecords": "載入中...",
    "processing": "處理中...",
    "search": "搜索:",
    "zeroRecords": "沒有匹配結果",
    "paginate": {
        "first": "首頁",
        "previous": "上頁",
        "next": "下頁",
        "last": "末頁"
    },
    "aria": {
        "sortAscending": ": 以升序排列此列",
        "sortDescending": ": 以降序排列此列"
    }
}

　　若是從開發角度來說的話，每次都初始化這個配置，挺麻煩的，因此咱們能夠封裝成文件，下個頁面引用一下就能夠了，接下來建立一個名字爲 dataTables.defaults.js 的文件代碼以下

$.extend($.fn.dataTable.defaults, {
    language: {
        "decimal": "",
        "emptyTable": "No data available in table",
        "info": "當前顯示第 _START_ 至 _END_ 項，共 _TOTAL_ 項。",
        "infoEmpty": "當前顯示第 0 至 0 項，共 0 項",
        "infoFiltered": "(由 _MAX_ 項結果過濾)",
        "infoPostFix": "",
        "thousands": ",",
        "lengthMenu": "每頁 _MENU_ 項",
        "loadingRecords": "載入中...",
        "processing": "處理中...",
        "search": "搜索:",
        "zeroRecords": "沒有匹配結果",
        "paginate": {
            "first": "首頁",
            "previous": "上頁",
            "next": "下頁",
            "last": "末頁"
        },
        "aria": {
            "sortAscending": ": 以升序排列此列",
            "sortDescending": ": 以降序排列此列"
        }
    }
});

　　我如今咱們的語言本地化配置就算結束了，若是單獨的文件必定別忘記引用!!

3.下面咱們看下別的配置

• 頁面代碼很簡單

<table id="table" class="table table-condensed  table-hover"> 
</table>

• 基礎配置

var table = $("#table").DataTable({
    lengthMenu: [[20, 40, 60, -1], [20, 40, 60, "All"]],
    sort: false,
    pageLength: 20,
    pagingType: "full_numbers",
    paging: true,
    searching: false, //屏蔽datatales的查詢框
    dom: 'rt<"row"<"col-md-4" i><"col-md-8"p>>',
    processing: true,
    serverSide: true,
    columns: [
        { title: "編號", data: "Uid", visible: true },
        { title: "帳號", data: "Account" },
        { title: "密碼", data: "PassWord" },
        { title: "狀態", data: "StatusName" },
        { title: "時間", data: "CreateTime" },
    ],
    ajax: {
        url: '/User/GetUserList',
        type: 'POST'
    }
});

其餘配置就不說了，就只說說dom吧，這個配置項是操做 搜索、數據信息、按鈕、每頁顯示多少條這幾個選項的的位置

• l - Length changing 改變每頁顯示多少條數據的控件
• f - Filtering input 即時搜索框控件
• t - The Table 表格自己
• i - Information 表格相關信息控件
• p - Pagination 分頁控件
• r - pRocessing 加載等待顯示信息
• < > - div elements 表明一個div元素 <div><div>
• <"#id" > - div with an id 指定了id的div元素 <div id='id'><div>
• <"class" > - div with a class 指定了樣式名的div元素 <div class='class'><div>
• <"#id.class" > - div with an id and class 指定了id和樣式的div元素 <div id='id' class='class'><div>

要顯示什麼元素，顯示在什麼位置本身安排就行了，我比較習慣上邊的篩選項本身定義，因此表格上的信息就被我隱藏掉了.

下面展現一下後端的代碼，比較簡單沒有作什麼抽象之類的

 

public ActionResult GetUserList()
{
    UserInfo query = new UserInfo
    {
        PageStart = Convert.ToInt32(Request.Form.Get("start")),
        PageEnd = Convert.ToInt32(Request.Form.Get("length"))
    };

    var data = userInfoService.FindUserInfoList(query).ToList();
    int count = userInfoService.FindUserInfoListCount(query);
    DataTableModel<UserInfo> model = new DataTableModel<UserInfo>()
    {
        draw = Convert.ToInt32(Request.Form.Get("draw")),
        recordsTotal = count,
        recordsFiltered = count,
        data = data,
        error = string.Empty
    };
    var iso = new Newtonsoft.Json.Converters.IsoDateTimeConverter();
    iso.DateTimeFormat = "yyyy-MM-dd HH:mm:ss";
    object obj = new object();
    return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model, iso));
}

這裏還要說下注意的地方，

Request.Form.Get("draw") 請求次數計數器，每次發送給服務器後又原封返回，不用作什麼處理，切記必定要返回，否則錯哪你都不知道。
Request.Form.Get("start") 第一條數據的起始位置，從0開始， 頁碼*頁數=start  若是你用的是mysql數據庫，就方便了 limit start,length  就能夠了
Request.Form.Get("length") 每頁顯示的條數 

 

dataTables 接受的參數必須按照下面這樣，它纔會認識

{
    "draw": 2,
    "recordsTotal": 24,
    "recordsFiltered": 24,
    "data": [
        {
            "Uid": 1,
            "Account": "aaaaaa@hotmail.com",
            "PassWord": "123456",
        },
        {
            "Uid":2,
            "Account": "bbbbb@hotmail.com",
            "PassWord": "456123",
        }
    ],
    "error": ""
}

這樣綁定就成功了，其餘的參數有不太明白的能夠自行百度，或者去官網看一看。