前言：我的这一篇文章是紧接着上一篇关于LigerUI的文章（http://www.zifangsky.cn/379.html）写的，因此在这里我就省略了相关的环境搭建，直接进入正题


一 介绍

在LigerUI中显示表格是用的ligerGrid，同时我们可以通过配置url参数就可以加载远程数据并显示成表格形式。不仅如此，ligerGrid还可以进行数据的排序和分页显示：

（1）排序：需要用到“sortname”和“sortorder”这两个参数，分别表示按哪个字段排序以及排序方式，如：asc，desc

（2）分页显示：需要用到的是”Rows“:[] 和 “Total“:0这两个参数，其中Rows表示页面显示的数据集，需要用一个数组进行赋值；Total表示的是数据的总数


注：我在上一篇文章提到，实际上上面的这些参数都是定义在ligerUI/js/plugins/ligerGrid.js这个文件中，因此这些参数名我们是可以进行自定义的，具体的示例可以参考那篇文章


二 使用服务端数据分页显示示例

（1）简单的前端页面：

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><basehref="<%=basePath%>"><title>ligerGridDemo2</title><linkhref="scripts/ligerUI/skins/Aqua/css/ligerui-all.css"rel="stylesheet"type="text/css"/><scriptsrc="scripts/jquery/jquery-1.9.0.min.js"type="text/javascript"></script><scriptsrc="scripts/ligerUI/js/ligerui.min.js"type="text/javascript"></script><scripttype="text/javascript">$(function(){vargrid=$("#maingrid").ligerGrid({checkbox:true,//每一行前面的选择框enabledSort:false,//排序url:"loadData.json",//从服务端加载数据columns:[{name:'username',display:'用户名',width:200},{name:'age',display:'年龄',width:400}],//表格中每一列的字段pageSize:10,//默认每一页显示多少数据pageSizeOptions:[10,20,50,100],//每页显示多少数据下拉选择框width:'auto',height:'95%'});});</script></head><body><divid="maingrid"></div></body></html>

从上面的代码可以看出，使用了url这个参数请求”loadData.json”来获取数据

（2）后台处理controller：

packagecn.zifangsky.controller;importjava.util.ArrayList;importjava.util.HashMap;importjava.util.List;importjava.util.Map;importorg.springframework.context.annotation.Scope;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.ResponseBody;@Controller@Scope("prototype")publicclassLoadDataController{privatestaticfinalintTotal=256;@RequestMapping(value="/loadData.json")@ResponseBody//pagesize和page分别表示每页数据条数和当前的页码publicMap<String,Object>loadData(@RequestParam(value="pagesize")intpagesize,@RequestParam(value="page")intpage){List<User>lists=newArrayList<User>();//返回数据列表intstart=pagesize*(page-1);//每一页的起始数据//模拟查询一页数据并添加到返回的数据列表中for(inti=0;i<pagesize;i++){inttemp=start+i;//如果超过总数则跳出循环if(temp<Total){Useruser=newUser();user.setUsername("员工-"+temp);user.setAge(temp);lists.add(user);}elsebreak;}Map<String,Object>result=newHashMap<String,Object>();result.put("Rows",lists);//数据集result.put("Total",Total);//数据的总数returnresult;}}

在这个controller中只定义了一个方法来处理前台的请求，并且通过获取前台传递进来的”pagesize”和”page”参数进行模拟分页查询数据，代码中有详细注释因此不多说。最后就是将数据的List集合赋值给“Rows”参数，数据总数设置了一个固定的256条


注：上面controller中使用到的实体类User：

packagecn.zifangsky.controller;publicclassUser{privateStringusername;privateintage;publicStringgetUsername(){returnusername;}publicvoidsetUsername(Stringusername){this.username=username;}publicintgetAge(){returnage;}publicvoidsetAge(intage){this.age=age;}}

（3）显示效果：