前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

效果：

我这个表格数据 比较少没有第2页

有多例多页的效果（带滚动条和翻页）：

 

 

1.  jsp页面：

表格声明部分：

 

 <div class="row"><div class="col-md-12 col-sm-12 col-xs-12"><div class="x_panel"><div class="x_title"><h2>权限角色管理 </h2><ul class="nav navbar-right panel_toolbox"><li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li><li><a href="javascript:void(0);" id="add"><i class="fa fa-plus"></i></a></li></ul><div class="clearfix"></div></div><div class="x_content"><div class="form-inline"><label>角色名称：<input id="theRoleName" type="text" class="form-control input-sm" placeholder="输入角色名称" style="width: 100px;"></label>   <button class="btn btn-success btn-sm" style="margin-bottom:0;" onclick="javascript: myTable.ajax.url('system/getAuthRoleList').load();"><i class="fa fa-search">查询</i></button><button class="btn btn-info btn-sm" style="margin-bottom:0;" onclick="reset();"><i class="fa fa-undo">重置</i></button></div><table id="datatable" class="table table-striped table-bordered"><thead><tr><th width="120px">序号</th><th width="340px">角色名称</th><th width="440px">角色资源字串</th><th>操作</th></tr></thead></table></div></div></div></div>

表格初始化部分：

 

页面加载的时候 会自动初始化表格，从后端查出数据装入表中。

 

	    <!-- 分页相关JS --><script src="css/vendors/datatables.net/js/jquery.dataTables.min.js"></script><script src="css/vendors/datatables.net-bs/js/dataTables.bootstrap.js"></script><script type="text/javascript">var myTable$(function() {//初始化表格对象myTable =  $('#datatable').DataTable({dom: 'irtlp',searching: false,processing: true,serverSide: true,paging: true,info: true,scrollX: true, //列太多，超过显示长度需要滚动条时使用ajax: {url: "system/getAuthRoleList",// 数据请求地址type: "POST",data: function (params) {//此处为定义查询条件 传给控制器的参数//角色名称params.roleName = $("#theRoleName").val()}},columns: [{ data: "id" },{ data: "roleName" },{ data: "resourcesIds" }],columnDefs: [{targets: 3,// 操作例的位置，从0开始数为第几例，data: "id",width: 140,"render": function(data, type, full){return  "<a id='upd' class='btn btn-info btn-xs'><i class='fa fa-pencil'></i>修改权限</a>"+ "<button class='btn btn-danger btn-xs' onclick='deleteRoleRes("+data+")'><i class='fa fa-remove'></i> 删除</button>"}}],language: {url: "css/vendors/language-zh.json"}});    <!-- 分页相关JS --><script src="css/vendors/datatables.net/js/jquery.dataTables.min.js"></script><script src="css/vendors/datatables.net-bs/js/dataTables.bootstrap.js"></script><script type="text/javascript">var myTable$(function() {//初始化表格对象myTable =  $('#datatable').DataTable({dom: 'irtlp',searching: false,processing: true,serverSide: true,paging: true,info: true,scrollX: true, //列太多，超过显示长度需要滚动条时使用ajax: {url: "system/getAuthRoleList",// 数据请求地址type: "POST",data: function (params) {//此处为定义查询条件 传给控制器的参数//角色名称params.roleName = $("#theRoleName").val()}},columns: [{ data: "id" },{ data: "roleName" },{ data: "resourcesIds" }],columnDefs: [{targets: 3,// 操作例的位置，从0开始数为第几例，data: "id",width: 140,"render": function(data, type, full){return  "<a id='upd' class='btn btn-info btn-xs'><i class='fa fa-pencil'></i>修改权限</a>"+ "<button class='btn btn-danger btn-xs' οnclick='deleteRoleRes("+data+")'><i class='fa fa-remove'></i> 删除</button>"}}],language: {url: "css/vendors/language-zh.json"}});

 

 

 

 

 

2.  通过 数据请求地址 找到对应的控制器方法：

参数：  draw ： 不用管 

 start ：  从第N条开始

 length ：  每页显示N条

 roleName  ：查询条件（此处是一个角色表，用于查询角色名为N的结果）

 

返回的参数：recordsTotal、recordsFiltered  都是结果集总记录数。data：结果集。draw：原样返回。

 

 

	/*** 加载权限角色列表* @param draw* @param start* @param length* @param roleName* @return* @throws Exception*/@ResponseBody@RequestMapping("/getAuthRoleList")public Object getAuthRoleList(int draw, int start, int length, String roleName)throws Exception{_logger.info("＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋　 展示权限角色列表  ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ ");PageInfo<AuthRole> pageInfo = _authRoleService.selectAuthRoleByPage((start/length)+1, length, roleName);Map<String, Object> map = new HashMap<String, Object>();List<Object> data = new ArrayList<Object>();for(AuthRole res : pageInfo.getList()){Map<String, Object> obj = new HashMap<String, Object>();obj.put("id", res.getId());obj.put("roleName", res.getRoleName());obj.put("resourcesIds", res.getResourcesIds());data.add(obj);}map.put("draw", draw);map.put("recordsTotal", pageInfo.getTotal());map.put("recordsFiltered", pageInfo.getTotal());map.put("data", data);return map;}

 

 

只要把后端数据查出来，处理为要求的json格式数据返回给datatable就是了。

我的代码分页有用pagehelper分页插件。可以不用插件自己写分页sql一样的。只要返回的数据格式对了，datatable就能解析。

 

3.pageHelper的用法 ：http://blog.csdn.net/jiangyu1013/article/details/56287388点击打开链接