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

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

JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
js怎么获取复选框选中的值
本篇文章主要给大家介绍js获取复选框选中的值的实现方法. js获取复选框选中的值的方法实现,对于新手小白来说可能有一定的难度. 下面我们就结合具体的代码示例为大家详细介绍js实现获取复选框中选中的值的 ...
原生js打印阅览复选框不显示问题
原生js打印阅览复选框不显示问题原生js打印预览,主要是阅览时候回出现一些问题,比如复选框传值,√不显示,那么怎么来解决这个问题呢?首先我们看一下效果图:我的页面是vue环境这是预览状态,√和元页 ...
html简单获取多选框的,jquery获取复选框的值的简单实例
JS获取复选框被选中的值 0 1 2 3 4 5 6 7 JS代码对checkbox的其他几个操作 1. 全选 2. 取消全选 3. 选中所有奇数 4. 反选 5. 获得选中的所有值 js代码 $( ...
JS判断GridView中复选框有没有被选中
在执行多选操作时,如果在页面前台做下判断,有没有选择要被操作的项,如果没有,提示一下,会给客户一种比较友好的效果. //JS中判断的方法: //判断GridView控件中的复选框有没有被选中的,gdv ...
js获取checkbox复选框获取选中的选项
分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数. js实现: var form = document. ...
js,jquery获取复选框checkbox被选中的值
转载:https://blog.csdn.net/qq_35792598/article/details/76646983 <!DOCTYPE html PUBLIC "-//W3C/ ...
常用JS操作（复选框、单选框、下拉框）
直接上代码: jskey_form.js View Code if(typeof ($jskey) != "object") { $jskey = {}; } $jskey ...
js如何判断复选框是否选中
js判断复选框是否选中 <!doctype html> <html lang="cn"><head><meta http-equiv=&q ...

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

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

最新文章

热门文章