datatables.js 簡單使用--多選框和服務器端分頁

說明：datatables是一款jQuery表格插件。感覺EasyUI的datagrid更易用

內容：多選框和服務器端分頁

緣由：寫這篇博客的原因是datatables的文檔寫的不怎么樣，找東西很麻煩

環境：asp.net mvc ,  vs2015+sqlserver2012

顯示效果：

   

代碼：

   html部分：

<table id="tbUserList" class="table table-bordered table-hover">
    <thead class="text-center ">
        <tr>
            <th>
                <input type="checkbox" class="checkall" />
            </th>
            <th>ID</th>
            <th>菜單名稱</th>
            <th>菜單路徑</th>
            <th>排序</th>
            <th>添加日期</th>
        </tr>
    </thead>

    <tfoot class="text-center ">
        <tr>
            <th>
                <input type="checkbox" class="checkall" />
            </th>
            <th>ID</th>
            <th>菜單名稱</th>
            <th>菜單路徑</th>
            <th>排序</th>
            <th>添加日期</th>
        </tr>
    </tfoot>
</table>

 JS部分：

$(function () {
    var _dataTables = $('#tbUserList').DataTable({              
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "pageLength": 10,
        "serverSide": true,             
        "ajax": {
            "url": "/BasicManage/GetMenus",
            "type":"POST"
        },
        "columns": [
             {
                 "sClass": "text-center",
                 "data": "ID",
                 "render": function (data, type, full, meta) {
                     return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
                 },
                 "bSortable": false
             },
             { "data": "ID" },
             { "data": "Name" },
             { "data": "MenuPage" },
             { "data": "SortNo" },
             { "data": "AddDateStr" }                  
        ]
    });

 JS部分簡單說明：

    "serverSide": true啟動服務器端分頁

    "pageLength": 10 每頁10條記錄，注意pageLength注意大小寫，對應的值一定要是數字，，因為datatables的js里沒有對這項類型轉換，寫成字符串會出問題。

     看下面的源碼

    

    "ajax": 這個就不用說了，去哪取數據

    ”columns“： 這個的文檔在這里 http://datatables.net/reference/option/columns

         里面{}的順序對應表格中列的位置。

         ”data“：對應的是后台傳過來數據的key

         重點說第一個{}，是用來在第一列加一列多選框的。

         ”sClass“："text-center"  設置的class名，多選框會居中顯示，可以去datatables的css里搜索這個class名看具體設置

         "data": "ID"  這是要用到的數據，我把checkbox的value設置為ID,這樣方便取值

         ”render“ 這里就是要顯示的checkbox多選框了

如何實現全選：

       注意這里用prop

 $(".checkall").click(function () {
      var check = $(this).prop("checked");
      $(".checkchild").prop("checked", check);
});

    獲取選中的某一個checkbox的值

    if ($(".checkchild:checked").length > 1)
          {
               alert("一次只能修改一條數據");
               return;
          }

    var id = $(".checkchild:checked").val();

服務器后端如何傳數據：

     

 public JsonResult GetMenus()
        {
            int draw = Convert.ToInt32(Request["draw"]);
            int start = Convert.ToInt32(Request["start"]);
            int length = Convert.ToInt32(Request["length"]);
            int totalCount = 0;
            MenuDAO Dao = new MenuDAO();
            var menus = Dao.GetMvcMenus((start/length)+1, length, out totalCount);
            return Json(new {  draw= draw, recordsTotal= totalCount, recordsFiltered= totalCount, data = menus }, JsonRequestBehavior.AllowGet);
        }

 說明： 前端會向后台傳一些數據

       draw：這個不用關心，直接給它返回去就好了，注意要變成int類型

       start: 從第幾條記錄開始，從0開始計數，如果你每頁設置10條記錄，第一頁傳0，第二頁傳10，類推

       length: 每頁的記錄條數，對應的前端js設置的pageLength。

       返回json :Json(new { draw= draw, recordsTotal= totalCount, recordsFiltered= totalCount, data = menus }, JsonRequestBehavior.AllowGet);

       recordsTotal,recordsFiltered這兩個都填總記錄數就行了，data里就是實際的數據

       menus是一個 IEnumerable<Menu>集合  

Menu menu = new Menu();
return menu.Select().Where().And("MenuType", "mvc").ExecPageDataTable("ORDER BY ParentID",row,pageSize,out totalCount,Db
    .AsEnumerable().Select(d =>
    new Menu
    {
        ID = d.Field<int>("ID"),
        Name = d.Field<string>("Name"),
        MenuPage = d.Field<string>("MenuPage"),
        IconUrl = d.Field<string>("IconUrl"),
        SortNo = d.Field<double?>("SortNo"),
        Remark = d.Field<string>("Remark"),
        ParentID = d.Field<int?>("ParentID"),
        AddDateStr = d.Field<DateTime?>("AddDate").ToString()
    });

   題外話：在sqlserver2012上寫分頁sql非常簡單，據說性能也有提升(沒測試過)

        　　Select *  from  某表  ORDER　ＢＹ　某些列   OFFSET (@row-1)*@pageSize ROWS FETCH NEXT @pageSize ROWS ONLY

              替換相應參數  @row 取第幾頁， @pageSize 取多少條