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

来源：互联网发布：评书大师知乎编辑：程序博客网时间：2024/05/03 01:22

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 取多少条

1 0