如何用easyui在页面上实现分页操作

此项目我发布在https://download.csdn.net/download/qq_35654259/10549651中

1、效果图(下图为分页效果图)

分页效果图

2、准备工作

1)在操作数据库的java文件中要存在分页查询和数据的总行数

1-1数据的分页查询

(下面oracle语句中TABLE_NAME为表名, ROWNUM 是一个序列,ROWNUM RN 将序列ROWNUM起别名为RN,整个语句的意思是查询第21行到40行在表中的数据)

   SELECT * FROM  
  (  
   SELECT A.*, ROWNUM RN  
   FROM (SELECT * FROM TABLE_NAME) A  
   WHERE ROWNUM <= 40  
  )  
    WHERE RN >= 21

所以在java语句中应该为21,40用占位符替代或者用变量替代

1-1-1用变量替代 1-1-2用占位符实现

2）查询总行数

3、在Servlet中进行相应的操作

package cn.itcast.control;

import java.io.IOException;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.catalina.connector.Response;

import com.google.gson.Gson;

import cn.itcast.bean.UserInfoBean;
import cn.itcast.dao.UserInfoDAO;
@WebServlet("/user.action")
public class UserServlet extends HttpServlet{//继承HttpServlet
	
	 UserInfoDAO userdao = null;
	 UserInfoBean user = null;
	 /**
	  * 重写doGet方法,执行doPost方法。这样无论是get还是post请求都会执行doWrite方法
	  */
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(req, resp);
	}
	
	/**
	 * 
	 */
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doWrite(req, resp);
		
		
	}

	public void doWrite(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		resp.setContentType("text/html;charset=UTF-8");//定义MIME类型为html字符编码级为UTF-8
		userdao = new UserInfoDAO();//创建UserInfoDAO类的实体
		user = new UserInfoBean();//创建UserInfoBean类的实体
		String spage = req.getParameter("page");//从网页上得到page就是页数(分页效果图上为1)
		String sRow = req.getParameter("rows");//从网页上得到rows就是每页的记录条数(分页效果图上为10)
		List<UserInfoBean> list = userdao.fingPage(spage, sRow);//执行分页查询
		try {
			int count = userdao.getCount();//得到数据的总行数(分页效果图上为23)
			HashMap<String, Object> map = new HashMap<String, Object>();//由于在easyui中分页gson转json中有特定格式,为适应格式而加map
			map.put("total", count);//为迎合特定格式
			map.put("rows", list);//为迎合特定格式
			Gson gson = new Gson();
			String x = gson.toJson(map);//将分页数据转化为easyui中分页所需的json
			resp.getWriter().print(x);//将x数据相应到页面上
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	

}

其中easyui中datagrid对数据的格式要求

{"total":28,"rows":[
	{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
	{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
	{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
	{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
	{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
	{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}

4、对jsp页面操作

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta  charset="UTF-8">
<title>Insert title here</title>
<%@include file="/root/lujing.jsp" %>
</head>
<body>
<table id="dg" class="easyui-datagrid"
			data-options="fitColumns:true,singleSelect:true,pagination:true,url:'user.action',method:'get'">
			<%-- url:'user.action'表示交由映射地址为user.action的Servlet在这里我是UserServlet--%>
		<thead>
			<tr>
				<th data-options="field:'usid',width:100" >usid</th><%-- 根据特定格式查找数据内属性为 usid的值--%>
			<th data-options="field:'uname',width:100">Name</th><%-- 根据特定格式查找数据内属性为 uname的值--%>
			<th data-options="field:'pwd',width:100">pwd</th><%-- 根据特定格式查找数据内属性为 pwd的值--%>
			</tr>
		</thead>
	</table>
</body>
</html>

如何用easyui在页面上实现分页操作

猜你喜欢