Jquery Datatable的使用样例（ssm+bootstrsp框架下）服务器端分页

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

效果：

我这个表格数据 比较少没有第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点击打开链接