容桂网站建设哪家公司好,手机编辑WordPress博客,.net 创建网站项目,个人网站icp备案说明#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集合