ExtJs6 + Servlet + Mysql 实现分页功能
先给截图，再说代码：
1、ExtJs的代码如下：
/* paging.js * /
Ext.onReady(function() {
Ext.define('User', {
extend : 'Ext.data.Model',
// id:'user_model',
fields : [ {
name : 'id',
type : 'int'
}, {
name : 'userName',
type : 'string'
}, {
name : 'desc'
}, {
name : 'phone'
}, {
name : 'hobby'
}, {
name : 'birthday',
type : 'date',
dateformat : 'Y-m-d H:i:s'
} ]
});
var userStore = Ext.create('Ext.data.Store', {
model : 'User',
pageSize : 10,//每页显示的条数
proxy : {
type : 'ajax',
url : 'pagingServlet',
reader : {
type : 'json',
rootProperty : 'datas',
totalProperty : 'total'
}
},
autoLoad : true
});
var columns = [ {
text : 'ID',
dataIndex : 'id'
}, {
text : '姓名',
dataIndex : 'userName'
}, {
text : '描述',
dataIndex : 'desc'
}, {
text : '电话',
dataIndex : 'phone'
}, {
text : '爱好',
dataIndex : 'hobby'
}, {
text : '生日',
dataIndex : 'birthday'
} ];
var win = Ext.create('Ext.window.Window', {
title : 'Ext分页实例',
height : 600,
width : 800,
layout : 'fit',
collapsible : true, // 可折叠
autoScroll : true,
draggable : true,
tbar : [ {
xtype : 'container',
layout : 'form',
items : [ {
xtype : 'textfield',
fieldLabel : '按姓名查找',
labelWidth : '70',
name : 'userName'
} ]
}, '-', {
xtype : 'button',
text : '查询',
iconCls : 'search',
tooltip : 'Query By Name'
} ],
items : {
xtype : 'grid',
store : userStore,
columns : columns,
selModel : 'cellmodel',
autoScroll : true
},
dockedItems : [ {
xtype : 'pagingtoolbar',
store : userStore, // same store GridPanel is using
dock : 'bottom',
displayInfo : true
} ],
renderTo : Ext.getBody()
});
win.show();
});
主要用到了 ExtJs中的 window ,gird,button,store,model paging
其中有关分页最重要的就是：在你的store里加入
pageSize : 10,//每页显示的条数
不要要加什么params：limit、start ，就因为这个被官网API坑死了。
前端会自动向后台传 参数 类似于：page=1&start=0&limit=10，注意的是这些值会随你按下一页自动变，然后再传到后台，所以你只需要在后台获取start和limit的就可以了，而limit就等于pageSize。至于page更本不用管他，因为你已经设置了。
totalProperty : 'total'
这个total就是后台传来的记录总数，extJs会自动根据你的total和pageSize值算出总页数，即total%pageSize。
2、说了这么多，还没上后台的代码。现在上：（仔细看看你Servlet中的代码就明白了）
package com.extJs.demo.servlet;
import java.util.Date;
/**实体类
* User.java
* @author Mercy
*
*/
public class User {
private Integer id;
private String userName;
private String desc;
private String phone;
private String hobby;
private Date birthday;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getDesc() {
return desc;
}
public void setDesc(String desc) {
this.desc = desc;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getHobby() {
return hobby;
}
public void setHobby(String hobby) {
this.hobby = hobby;
}
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
@Override
public String toString() {
return "User [id=" + id + ", userName=" + userName + ", desc=" + desc
+ ", phone=" + phone + ", hobby=" + hobby + ", birthday="
+ birthday + "]";
}
}
package com.extJs.demo.servlet;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
/**JDBC+Service
* DataService.java
* @author Mercy
*
*/
public class DataService {
private static Connection conn;
private PreparedStatement pstat;
private ResultSet rs;
private User user;
/**
* 执行查询
* @return
*/
public List<User> getUserInfo() {
List<User> users = new ArrayList<User>();
String sql = "SELECT * FROM tb_user";
try {
pstat = getConn().prepareStatement(sql);
rs = pstat.executeQuery();
while (rs.next()) {
user = new User();
user.setId(rs.getInt(1));
user.setUserName(rs.getString(2));
user.setDesc(rs.getString(3));
user.setPhone(rs.getString(4));
user.setHobby(rs.getString(5));
user.setBirthday(rs.getDate(6));
users.add(user);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return users;
}
/**
* 获取连接
* @return
*/
public static Connection getConn() {
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/test", "root", "admin");
} catch (ClassNotFoundException | SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return conn;
}
public void closeAll() throws SQLException {
if (conn == null) {
conn.close();
}
if (pstat == null) {
pstat.close();
}
if (rs == null) {
rs.close();
}
}
public static void main(String[] args) throws SQLException {
DataService ds = new DataService();
System.out.println(ds.getUserInfo());
JSONArray ja = JSONArray.fromObject(ds.getUserInfo());
System.out.println(ja);
JSONObject jo = new JSONObject();
jo.put("datas", ja);
System.out.println("**** "+jo);
ds.closeAll();
}
}
package com.extJs.demo.servlet;
import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;
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 net.sf.json.JSONArray;
import net.sf.json.JSONObject;
/**Servlet 控制器
* ExtJsServlet.java
* @author Mercy
*
*/
@WebServlet(name = "ExtJsServlet", urlPatterns = "/pagingServlet")
public class ExtJsServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
private static DataService ds = new DataService();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
List<User> users = ds.getUserInfo();
JSONArray ja;
int start = Integer.valueOf(req.getParameter("start"));
int limit = Integer.valueOf(req.getParameter("limit"));
int page = Integer.valueOf(req.getParameter("page"));
int userSize = users.size();
System.out.println(start + " " + limit + " " + page);
List<User> subLists = new ArrayList<User>();
userSize = userSize - start;
if (userSize >= limit) {
subLists = users.subList(start, start + limit);
} else {
subLists = users.subList(start, userSize + start);
}
ja = JSONArray.fromObject(subLists);
JSONObject jo = new JSONObject();
jo.put("datas", ja);
jo.put("total", users.size());
System.out.println(jo);
resp.setCharacterEncoding("UTF-8");
resp.setHeader("Cache-Control", "no-cache");
resp.setContentType("text/html;charset=UTF-8");
resp.getWriter().print(jo);
resp.getWriter().close();
try {
ds.closeAll();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
}
}
后台代码主要由 User.java + DataService.Java + ExtJsServlet.java 构成
为了方便就没有估计到重构了，直接讲数据库的链接操作和查询操作都放在了DataService.Java中 -- 请轻喷。