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 BY 某些列 OFFSET (@row-1)*@pageSize ROWS FETCH NEXT @pageSize ROWS ONLY
替换相应参数 @row 取第几页, @pageSize 取多少条