easyui 分页实现
1、用datagrid 做分页显示， 依据API样例，最终解决。废话不说，datagrid分页 有一个附加的分页控件 通过在datagrid中设置pagination:true 就会显示分页 当请求是 后台会通过 获取page 获取当前页 依据rows每页显示条数
返回格式 {"total":486,"rows":[{"age":10,"email":"lqi@sina.com","id":1,"name":"张三","sex":"男"}]}
total 总条数不能改 rows 数据 查询出来的list
2、数据库数据
3、看效果如图：
4、html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<table id="dg" class="easyui-datagrid" style="width:100%;">
</table>
<script type="text/javascript">
$('#dg').datagrid({
url:'http://localhost:8080/easyui/TestData',//数据请求地址
toolbar:'#toolbar',// 数据网格工具栏 比方加入 改动
pagination:true,//分页显示
fitColumns:true,//自己主动适应宽度
autoRowHeight:true,//自己主动行高度
loadMsg:'正在载入数据请稍后...',
nowrap:true,//设置为true 有利于提高性能
idField:'id',//字段标识
rownumbers:true,//显示行号
singleSelect:true,//仅仅同意选择一行
//pageNumber:1,//初始化页面数量
pageSize:20,//初始化显示条数
pageList:[20,40,60],//分页列表
columns:[[
{field:'id',title:'id',width:100},
{field:'name',title:'name',width:100},
{field:'email',title:'email',width:100,align:'center'}
]]
});
/*
这里多多两句通过例如以下參数可获取一些分页数据
var opts=$('#dg').datagrid('options');
//获取当前页
var page_Number = opts.pageNumber; //pageNumber为datagrid的当前页码
//获取每页显示的条数
var page_Size = opts.pageSize;
*/
</script>
</body>
</html>
import java.io.IOException;
import java.io.Writer;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
/**
* Servlet implementation class TestData
*/
public class TestData extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestData() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.setHeader("Cache-Control", "no-cache");
// 获取前台页数
int page = Integer.parseInt(request.getParameter("page"));
// 获取前台每页显示条数
int row = Integer.parseInt(request.getParameter("rows"));
List<Userinfo> list = JDBCUtil.query(page, row);
Map<String, Object> jsonMap = new HashMap<String, Object>();// 定义map
jsonMap.put("total", JDBCUtil.queryCount());// total键 存放总记录数。必须的
jsonMap.put("rows", list);// rows键 存放每页记录 list
// 格式化result 一定要是JSONObject
String result = JSONObject.fromObject(jsonMap).toString();
System.out.println(result);
Writer out = response.getWriter();
out.write(result);
}
}
源代码下载地址：http://download.csdn.net/download/itlqi/8868529
