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

<%@ 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 + "/";
%>



">





	$(function() {
		
		var grid = $("#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%'
		});
	});



	

（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;
	}
	
}

（3）显示效果：

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。