datatables.js 简单使用--多选框和服务器端分页

datatables.js 简单使用--多选框和服务器端分页

 

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

内容：多选框和服务器端分页

缘由：写这篇博客的原因是datatables的文档写的不怎么样，找东西很麻烦

环境：asp.net mvc ,  vs2015+sqlserver2012

显示效果：

    

代码：

   html部分：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

< 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部分：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

$( 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

1 2 3 4

$( ".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();

服务器后端如何传数据：

     

1 2 3 4 5 6 7 8 9 10

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>集合  

 

   题外话：在sqlserver2012上写分页sql非常简单，据说性能也有提升(没测试过)

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

              替换相应参数  @row 取第几页， @pageSize 取多少条