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