LigerUI中通过加载服务端数据进行表格的分页显示

一 介绍

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

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

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

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

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

（1）简单的前端页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%><%	String path = request.getContextPath();	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()			+ path + "/";%>">	

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

（2）后台处理controller：

package cn.zifangsky.controller;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import org.springframework.context.annotation.Scope;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;@Controller@Scope("prototype")public class LoadDataController {	private static final int Total = 256;	@RequestMapping(value = "/loadData.json")	@ResponseBody	// pagesize和page分别表示每页数据条数和当前的页码	public Map loadData(@RequestParam(value = "pagesize") int pagesize,			@RequestParam(value = "page") int page) {		List lists = new ArrayList(); // 返回数据列表		int start = pagesize * (page - 1); // 每一页的起始数据		// 模拟查询一页数据并添加到返回的数据列表中		for (int i = 0; i < pagesize; i++) {			int temp = start + i;			// 如果超过总数则跳出循环			if (temp < Total) {				User user = new User();				user.setUsername("员工-" + temp);				user.setAge(temp);				lists.add(user);			} else				break;		}		Map result = new HashMap();		result.put("Rows", lists); // 数据集		result.put("Total", Total); // 数据的总数		return result;	}}

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

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

package cn.zifangsky.controller;public class User {	private String username;	private int age;	public String getUsername() {		return username;	}	public void setUsername(String username) {		this.username = username;	}	public int getAge() {		return age;	}	public void setAge(int age) {		this.age = age;	}	}