J2EE之 Extjs4.0 Grid 分页展示

J2EE之 Extjs4.0 Grid 分页显示
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /><script type="text/javascript" src="ext/bootstrap.js" ></script><script type="text/javascript" src="ext/ext-all.js" ></script><script type="text/javascript" >//预加载Ext.require([ 'Ext.grid.*', 'Ext.toolbar.Paging', 'Ext.data.*' ] );Ext.onReady(function(){//创建ModelExt.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 : 'pageServlet', reader: {//数据格式为json type: 'json', root: 'bugs', //获取数据总数 totalProperty: 'totalCount' } },autoLoad:true});//创建gridvar 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); })</script> </head> <body> <div id="grid"> </div> </body></html>
package xuyan;import java.io.IOException;import java.io.PrintWriter;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;public class pageServlet extends HttpServlet {/** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {Connection con = null; PreparedStatement pstmt = null; ResultSet rs = null; String start = request.getParameter("start"); String limit = request.getParameter("limit"); StringBuilder sb = null; //数据总数 int total = 0; try { Class.forName("com.mysql.jdbc.Driver"); con = DriverManager.getConnection( "jdbc:mysql://localhost:3306/test", "root", "1234"); } 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); response.setContentType("text/html"); response.setCharacterEncoding("UTF-8"); try { response.getWriter().write(json); response.getWriter().close(); } catch (IOException e) { e.printStackTrace(); } } ///** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doGet(request, response);}}
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"> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>pageServlet</servlet-name> <servlet-class>xuyan.pageServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>pageServlet</servlet-name> <url-pattern>/pageServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list></web-app>

J2EE之 Extjs4.0 Grid 分页展示

热点推荐