首页 > 代码库 > sencha touch实现分页
sencha touch实现分页
从客户端传过来的参数为:limit,start
服务端代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@page import="java.sql.SQLException"%> <%@page import="java.sql.DriverManager"%> <%@page import="java.sql.Connection"%> <%@page import="java.sql.PreparedStatement"%> <%@page import="java.sql.ResultSet"%> <%@page import="com.gr.jiang.json.JsonString"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <% Connection con = null ; ResultSet set = null ; PreparedStatement pre = null ; try{ Class.forName("com.mysql.jdbc.Driver").newInstance() ; String url = "jdbc:mysql://localhost:3306/news_mobile" ; con = DriverManager.getConnection(url,"root","jiang") ; int pagecount = 0 ; String SEL = "SELECT * FROM books limit ?,?" ; String COU = "SELECT COUNT(*) FROM books" ; pre = con.prepareStatement(SEL) ; pre.setInt(1,Integer.parseInt(request.getParameter("start"))) ; pre.setInt(2,Integer.parseInt(request.getParameter("limit"))) ; set = pre.executeQuery() ; int count = 0 ; //JsonString json = new JsonString() ; String str = "[" ; while(set.next()){ str += "{\"id\":\""+set.getInt("id")+"\",\"image_url\":\"" +set.getString("image_url")+"\",\"book_name\":\"" +set.getString("book_name")+"\",\"author\":\"" +set.getString("author")+"\",\"description\":\"" +set.getString("description")+"\"}," ; // json.start() ; //json.setJson("id",set.getInt("id")) ; //json.setJson("image_url",set.getString("image_url")) ; //json.setJson("book_name",set.getString("book_name")) ; //json.setJson("author",set.getString("author")) ; //json.setJson("description",set.getString("description")) ; //json.end() ; count = set.getRow() ; } str = str.substring(0,str.length()-1)+"]" ; //System.out.println(str) ; pre = con.prepareStatement(COU) ; set = pre.executeQuery() ; set.next() ; pagecount = set.getInt(1) ; if(count > 0){ out.println("{\"success\":\"true\",\"bookCount\":\""+pagecount+"\",\"books\":"+str+"}") ; } else { out.println("{\"success\":\"false\",\"message\":\"读取数据失败\"}") ; } }catch(SQLException e){ out.println("{\"success\":\"false\",\"message\":\"读取数据失败\"}") ; e.printStackTrace() ; }finally{ set.close() ; pre.close() ; con.close() ; } %>客户端app.js:
Ext.require([ 'Ext.data.Store', 'Ext.data.reader.Json', 'Ext.dataview.DataView' ]) Ext.application({ name: 'MyApp', icon: 'images/icon.png', glossOnIcon: false, phoneStartupScreen: 'images/phone_startup.png', tabletStartupScreen: 'images/tablet_startup.png', launch: function() { Ext.define('BookInfo', { extend: 'Ext.data.Model', config:{ fields:['image_url','book_name','author','description'] } }); var bookReader=Ext.create('Ext.data.reader.Json',{ type: 'json', rootProperty: 'books', totalProperty:'bookCount' }); var pageCount;//页数 var bookStore=Ext.create('Ext.data.Store',{ autoLoad:true, model:'BookInfo', proxy: { type: 'ajax', url : 'http://10.65.9.223:8080/news_mobile/json.jsp', reader: bookReader }, pageSize:5, scope:this, listeners: { load:function(store,records,successful,operation) { //读取数据失败 if(!successful) //弹出错误信息 Ext.Msg.alert( this.getProxy().getReader().rawData.message ); else { var recordCount=bookReader.rawData[bookReader.getTotalProperty()]; var pageSize=this.getPageSize(); pageCount=(recordCount-recordCount%pageSize)/pageSize; if(recordCount%pageSize>0) pageCount+=1; Ext.getCmp('pageInfo').setText( String(this.currentPage)+"/"+pageCount+"页" ); } } } }); var toolbar =Ext.create('Ext.Toolbar',{ docked : 'bottom', width:'100%', layout:{ type:'hbox', pack:'center' }, items: [ { iconMask:true, iconCls: 'firstpage', handler:function(){ bookStore.loadPage(1); } }, { iconMask:true, iconCls: 'arrow_left', handler:function(){ if(bookStore.currentPage>1) { bookStore.previousPage(); } } }, { iconMask:true, iconCls: 'arrow_right', handler:function(){ if(bookStore.currentPage<pageCount) { bookStore.nextPage(); } } }, { iconMask:true, iconCls: 'lastpage', handler:function(){ bookStore.loadPage(pageCount); } }, { html:'', style:'font-size:16px', id:'pageInfo' }] }); var bookTemplate=new Ext.XTemplate( '<tpl for=".">', '<div class="Book_img"><img src=http://www.mamicode.com/"{image_url}"/>
HTML <!DOCTYPE html> <html> <head> <title>对服务器端数据进行分页</title> <link rel="stylesheet" href=http://www.mamicode.com/"css/application.css">sencha touch实现分页
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。