那么我们来详细讲解一下“JSP+Ext2.0实现分页的方法”的完整攻略。
1. 准备工作
首先,我们需要准备好以下工作:
- 安装数据库(例如MySQL)和Tomcat服务器。
- 创建数据库表并插入少量数据,以便进行分页。
- 下载并添加ExtJS 2.0的库文件到项目中。
2. 创建JSP页面和Servlet
接下来,我们需要创建一个JSP页面,以及一个Servlet来获取并处理数据。
下面是一个示例的JSP页面(假设文件名为data.jsp
),其中包括一个显示数据的表格和一个分页栏:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据分页</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="resources/js/ext-base.js"></script>
<script type="text/javascript" src="resources/js/ext-all.js"></script>
<script type="text/javascript" src="resources/js/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<body>
<table id="dataGrid"></table>
<div id="pagingBar"></div>
</body>
</html>
具体的实现细节在后面会有说明。
然后,我们需要创建一个Servlet(假设文件名为DataServlet.java
),用来处理获取和分页操作:
package com.example;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONObject;
public class DataServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
// 模拟数据
private List<User> userList = new ArrayList<>();
{
userList.add(new User(1, "张三", "男", 23));
userList.add(new User(2, "李四", "男", 26));
userList.add(new User(3, "王五", "女", 21));
userList.add(new User(4, "赵六", "女", 28));
userList.add(new User(5, "孙七", "男", 29));
userList.add(new User(6, "周八", "女", 20));
userList.add(new User(7, "吴九", "男", 24));
userList.add(new User(8, "郑十", "女", 22));
}
public DataServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
int page = Integer.parseInt(request.getParameter("page"));
int pageSize = Integer.parseInt(request.getParameter("limit"));
List<User> data = getPageData(page, pageSize);
JSONObject result = new JSONObject();
result.put("code", 0);
result.put("msg", "");
result.put("count", userList.size());
result.put("data", data);
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json");
PrintWriter out = response.getWriter();
out.print(result.toString());
out.flush();
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
/**
* 获取指定页码和每页数量的数据
* @param page
* @param pageSize
* @return
*/
private List<User> getPageData(int page, int pageSize) {
int start = (page - 1) * pageSize;
int end = start + pageSize;
if (end > userList.size()) {
end = userList.size();
}
return userList.subList(start, end);
}
/**
* 用户类
*/
private static class User {
private int id;
private String name;
private String sex;
private int age;
public User(int id, String name, String sex, int age) {
super();
this.id = id;
this.name = name;
this.sex = sex;
this.age = age;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
}
这里我们模拟了一个用户类,并使用了List作为数据源。在Servlet中,我们需要解析请求参数中的页码和每页数据数量,然后使用getPageData()
方法获取数据,最后将返回结果封装为JSON格式返回给前端。
3. 前端实现
最后,我们需要使用ExtJS 2.0的相关组件来实现前端的数据显示和分页功能。
首先,我们需要编写一个data.js
文件,其中包含以下代码:
Ext.onReady(function() {
Ext.QuickTips.init();
var pageSize = 3;
var dataStore = new Ext.data.JsonStore({
url: 'DataServlet',
method: 'GET',
root: 'data',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}, {
name: 'sex',
type: 'string'
}, {
name: 'age',
type: 'int'
}],
listeners: {
'load': function(store, records, options) {
var pagingBar = Ext.getCmp('pagingBar');
if (!pagingBar) {
pagingBar = new Ext.PagingToolbar({
id: 'pagingBar',
pageSize: pageSize,
store: dataStore,
displayInfo: true,
displayMsg: '当前显示第{0}条到第{1}条记录,共{2}条记录',
emptyMsg: '没有记录'
});
pagingBar.doRefresh();
} else {
pagingBar.store.loadData(store.reader.jsonData);
}
}
},
baseParams: {
'page': '1',
'limit': pageSize
}
});
var columns = [{
header: 'ID',
dataIndex: 'id',
width: 50
}, {
header: '姓名',
dataIndex: 'name',
width: 80
}, {
header: '性别',
dataIndex: 'sex',
width: 50
}, {
header: '年龄',
dataIndex: 'age',
width: 50
}];
var grid = new Ext.grid.GridPanel({
title: '用户列表',
store: dataStore,
columns: columns,
height: 200,
renderTo: 'dataGrid'
});
});
这段代码中,我们使用了JsonStore
来获取数据,并设置了分页、查询参数和监听器,以便实现数据分页展示。在监听器中,我们使用PagingToolbar
来显示分页栏信息。
最后,在data.js文件的头部加载了必要的ExtJS库和CSS文件。
至此,我们实现了一个简单的JSP和ExtJS 2.0的分页实现。
4. 示例说明
我们可以通过在浏览器中访问data.jsp
文件来查看效果,如下:
http://localhost:8080/YourProjectName/data.jsp
其中YourProjectName
为你的项目名称。
可以根据需要调整示例代码中的分页数量和数据列表,以适应不同的应用场景。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JSP+EXt2.0实现分页的方法 - Python技术站