datatables.js 简单使用--多选框和服务器端分页
来源:互联网 发布:appsevr php升级 编辑:程序博客网 时间:2024/05/17 16:01
说明: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>集合
- datatables.js 简单使用--多选框和服务器端分页
- datatables.js 简单使用--多选框和服务器端分页
- 使用vue和datatables进行表格的服务器端分页
- datatables服务器端分页查询
- Datatables 服务器端分页
- DataTables服务器端分页
- JS----dataTables分页排序
- JS----dataTables分页排序
- Datatables(1.10以上版本)服务器端分页(Java)
- datatables简单使用实例
- Datatables简单的使用
- DataTables的简单使用
- DataTables前端分页插件使用
- DataTables-1.10.15 服务器端使用教程
- DataTables服务器端传入传出(接收与提交)的数据格式 搜索、排序和分页与后台数据的交互
- JS----dataTables分页排序参数详解
- jQuery datatables使用(前台页面分页 简单案例 1 未完待续...)
- datatables dom 的简单使用
- Mongodb启动命令mongod参数说明
- <iOS> 谈谈iOS Animation
- LDA线性判别分析
- 【WPF】TabControl垂直分页栏/选项卡
- 电子白板的开源项目【whiteboard】
- datatables.js 简单使用--多选框和服务器端分页
- JS防止表单提交之后用户点击浏览器后退按钮再次提交
- Android studio Error :...you can't have non-Gradle Java modules and Android-Gradle modules ...
- Mysql的数据查询语言DQL之基本查询
- win10系统下搭建mongodb服务
- 修改linux上ssh端口号
- 数据分析方法--PCA
- Java BlockingQueue生产者消费者实例
- LeetCode 61. Rotate List2.