Extjs4---grid+servlet分頁查詢
阿新 • • 發佈：2019-01-31
這個例項是extjs4 grid+servlet的分頁查詢，忙了一下午總算弄出來了，和大家交流分享一下，我也是這幾天在自學的Extjs4，可能有些地方寫的不太對，有錯誤希望大家指出來
html頁面程式碼;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Grid分頁查詢示例</title> <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" /> <script type="text/javascript" src="ext4/ext-all.js"></script> <script type="text/javascript" src="js/pageOfgrid.js"></script> </head> <body> <div id="grid"></div> </body> </html>
pageOfgrid.js程式碼：
//預載入 Ext.require( [ 'Ext.grid.*', 'Ext.toolbar.Paging', 'Ext.data.*' ] ); Ext.onReady( function(){ //建立Model Ext.define( 'User', { extend:'Ext.data.Model', fields:[ {name:'name',mapping:'name'}, {name:'sex',mapping:'sex'}, {name:'age',mapping:'age'} ] } ) //建立資料來源 var store = Ext.create( 'Ext.data.Store', { model:'User', //設定分頁大小 pageSize:5, proxy: { type: 'ajax', url : 'users', reader: { //資料格式為json type: 'json', root: 'bugs', //獲取資料總數 totalProperty: 'totalCount' } }, autoLoad:true } ); //建立grid var grid = Ext.create('Ext.grid.Panel',{ store:store, columns:[ {text:'姓名',width:120,dataIndex:'name',sortable:true}, {text:'性別',width:120,dataIndex:'sex',sortable:true}, {text:'年齡',width:120,dataIndex:'age',sortable:true} ], height:200, width:480, x:20, y:40, title: 'ExtJS4 Grid分頁查詢示例示例', renderTo: 'grid', //分頁功能 bbar: Ext.create('Ext.PagingToolbar', { store: store, displayInfo: true, displayMsg: '顯示 {0} - {1} 條，共計 {2} 條', emptyMsg: "沒有資料" } ) } ) store.loadPage(1); } )
Servlet後臺程式碼：
package servlet; import java.io.IOException; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /* * @author 劉暢 */ public class Servlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { Connection con = null; PreparedStatement pstmt = null; ResultSet rs = null; String start = req.getParameter("start"); String limit = req.getParameter("limit"); StringBuilder sb = null; //資料總數 int total = 0; try { Class.forName("com.mysql.jdbc.Driver"); con = DriverManager.getConnection( "jdbc:mysql://localhost:3306/user", "root", "123456"); } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } //查詢資料總數語句 String countSql = "select count(*) from users"; try { pstmt = con.prepareStatement(countSql); rs = pstmt.executeQuery(); while(rs.next()){ total = rs.getInt(1); } } catch (SQLException e) { e.printStackTrace(); } //分頁查詢語句 String sql = "select * from users limit " + start + ", " + limit; try { pstmt = con.prepareStatement(sql); rs = pstmt.executeQuery(); sb = new StringBuilder(); //設定json資料格式 sb.append("{totalCount:"+total+",bugs:["); while (rs.next()) { sb.append("{"); sb.append("name:" + "\'" + rs.getString(1) + "\',"); sb.append("sex:" + "\'" + rs.getString(2) + "\',"); sb.append("age:" + "\'" + rs.getString(3) + "\'"); sb.append("},"); } } catch (SQLException e) { e.printStackTrace(); } try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } String json = sb.substring(0, sb.length() - 1); json += "]}"; System.out.println(json); resp.setContentType("text/html"); resp.setCharacterEncoding("UTF-8"); try { resp.getWriter().write(json); resp.getWriter().close(); } catch (IOException e) { e.printStackTrace(); } } }
web.xml原始碼：
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>getUsers</servlet-name>
<servlet-class>servlet.Servlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>getUsers</servlet-name>
<url-pattern>/users</url-pattern>
</servlet-mapping>
</web-app>
效果圖：
