湖南岳阳网站建设公司黄页顺企网,怎样不让网站被收录,常州溧阳建设工程管理中心网站,站长之家 网站模板说明#xff1a;datatables是一款jQuery表格插件。感觉EasyUI的datagrid更易用 内容#xff1a;多选框和服务器端分页 缘由#xff1a;写这篇博客的原因是datatables的文档写的不怎么样#xff0c;找东西很麻烦 环境#xff1a;asp.net mvc , vs2015sqlserver2012 显示效… 说明datatables是一款jQuery表格插件。感觉EasyUI的datagrid更易用 内容多选框和服务器端分页 缘由写这篇博客的原因是datatables的文档写的不怎么样找东西很麻烦 环境asp.net mvc , vs2015sqlserver2012 显示效果 代码 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 idtbUserList classtable table-bordered table-hover thead classtext-center tr th input typecheckbox classcheckall / /th thID/th th菜单名称/th th菜单路径/th th排序/th th添加日期/th /tr /thead tfoot classtext-center tr th input typecheckbox classcheckall / /th thID/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 typecheckbox classcheckchild 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是一个 IEnumerableMenu集合
