今天做了个ExtJS4分页的小例子
直接上代码
这是index.jsp
<%@ page language="java" pageEncoding="utf-8"%>
<%@ page contentType="text/html; charset=utf-8"%>
<%
//response.setContentType("text/html; charset=utf-8");
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">
<script type="text/javascript" src="ext/ext-all.js"></script>
<!--<script type="text/javascript" src="js/testExtJs.js"></script>
-->
<script type="text/javascript" src="js/testPage.js"></script>
<link rel="stylesheet" href="ext/ext-all.css" type="text/css"></link></head>
<style>
body {
margin: 0 auto;
text-align: center;
padding: 0 auto;
}
#tb {
border: #000;
font-size: 12px;
text-align: center;
width: 1090px;
}
#tb tr {
margin-top: 2px;
padding-top: 4px;
}
#tb td {
overflow: hidden;
}
.kuai{
background:#ccddee;
vertical-align:center;
text-align:center;
width:180px;
height:25px;
font-size:12px;
color:#333333;
border: 1px solid #fff;
}
select{
width:200px;
background:#f5f5f5;
font-size:12px;
color:#333333;
}
#gridview{
margin-top:5px;
}
</style>
<body>
<div id="mainc">
<div id="formquery"></div>
<div id="gridview"></div>
</div>
</body>
</html>
这是testPage.js
Ext.onReady(function() {
var itemsPerPage = 2; // set the number of items you want per page
var store = Ext.create('Ext.data.Store', {
id : 'simpsonsStore',
autoLoad : false,
fields : [ 'name', 'email', 'phone' ],
pageSize : itemsPerPage, // items per page
proxy : {
type : 'ajax',
url : 'query2.jsp', // url that will load data with respect to
// start and limit params
reader : {
type : 'json',
root : 'items',
totalProperty : 'total'
}
}
});
// specify segment of data you want to load using params
store.load( {
params : {
start : 0,
limit : itemsPerPage
}
});
Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : store,
columns : [ {
header : 'Name',
dataIndex : 'name'
}, {
header : 'Email',
dataIndex : 'email',
flex : 1
}, {
header : 'Phone',
dataIndex : 'phone'
} ],
width : 400,
height : 200,
dockedItems : [ {
xtype : 'pagingtoolbar',
store : store,
dock : 'bottom',
displayInfo : true
} ],
renderTo : Ext.getBody()
});
});
最后一个是后台查询数据库生成json
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String names[]={"aaa","bbb","ccc","ddd"};//从后台查出来的结果集
String email[]={"aaaa","bbbb","cccc","dddd"};
String phone[]={"aaaaa","bbbbb","ccccc","ddddd"};
int start=Integer.parseInt(request.getParameter("start"));
int limit=Integer.parseInt(request.getParameter("limit"));
int count=4;//总条数
String json="{'total':'4','items':[";
for(int i = start; i < limit+start&&i<count; i++){
json+="{'name':'"+names[i]+"','email':'"+email[i]+"','phone':'"+phone[i]+"'},";
}
json+="]}";
json = json.replace(",]}", "]}");
out.write(json);
%>
是不是觉得很简单很方便
分享到：
相关推荐
在这个“EXTJS简单分页例子”中，我们将深入探讨EXTJS如何实现分页功能，以及如何与后台进行交互。 分页是Web应用中常见的数据展示方式，尤其在处理大量数据时，它可以提高页面加载速度并提供良好的用户体验。EXTJS...
在这个"SSH+ExtJs分页小例子"中，我们将探讨如何将这两种技术结合实现数据分页显示。 首先，我们来看NewsDAO.java文件。这个文件包含了两个关键方法：`findPageAll`和`totalRecord`。`findPageAll`方法实现了分页...
根据提供的标题“ExtJS .Net分页例子”，本文将详细介绍如何在.NET平台下使用ExtJS实现数据分页功能。ExtJS是一款强大的JavaScript库，用于构建复杂的前端应用，而.NET则是微软提供的一套开发框架，常用于服务器端...
在给定的"Extjs4 grid使用例子"中，我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分，它提供了一个灵活的、可定制的数据展示网格，通常用于显示和操作大量数据。 1. **...
1. **ExtJS分页组件**：ExtJS的GridPanel组件是展示数据的常用方式，它内置了分页功能。通过配置store（数据存储）中的paging参数，可以启用分页。例如，设置`paging: true`开启分页，然后通过`proxy`配置项连接到...
在"Extjs4的TreeGrid例子"这个主题中，我们将深入探讨TreeGrid的各种特性，以及如何在实际项目中应用这些示例。 1. **多语言支持**：描述中提到的"多语言"功能在ExtJS 4中通常通过i18n（国际化）实现。开发人员可以...
以下是对EXTJS分页后台处理的详细说明： 首先，`Store`对象是EXTJS中用于存储数据的核心组件。在你的代码中，`Store`被创建并配置了`baseParams`、`JsonReader`和`HttpProxy`。 1. `baseParams`: 这个属性用于传递...
在这个例子中，`pageSize`属性定义了每页显示的记录数，`proxy`部分设置了数据的获取方式，`paging: true`则启用了分页功能。 "ux.Andrie.pPageSize"看起来像是一个自定义的分页插件，可能是由社区开发者Andrie创建...
在本实例中，我们探讨的是如何在ExtJS应用中实现后台分页功能，这通常涉及到与服务器端的交互，以获取并展示大量数据。JSP（JavaServer Pages）是一种基于Java的动态网页技术，常用于处理后端逻辑，包括数据的读取和...
总结来说，实现ExtJS分页查询的关键在于前端和后端的协同工作。前端通过Store、Proxy和Paging Toolbar处理用户交互，后端通过Servlet接收请求，执行数据库操作，并返回符合约定的数据格式。通过这种方式，可以有效地...
EXTJS分页主要通过其Grid组件来实现，Grid组件可以展示大量的数据，并且支持动态加载和分页操作。在EXTJS中，我们通常会创建一个Store对象来管理数据源，Store与远程数据源（如Struts2 Action）进行交互，通过Ajax...
- **GridPanel**：数据网格是显示大量表格数据的有效方式，支持排序、分页、行选择、编辑等功能。 - **Column Model**：定义网格列的展示和行为。 - **Editor Grid**：允许用户直接在网格中编辑数据。 4. **表单...
这个例子可以帮助你理解EXTJS MVC的架构，并提供了一个实际操作的基础，你可以根据自己的需求进行改造和扩展。通过学习这个案例，你将学会如何组织代码，如何定义模型和视图，如何编写控制器以响应用户操作，以及...
在"Extjs4 mvc+struts 应用例子"中，我们看到的是一个利用这两者技术实现的网格（grid）功能。Grid是ExtJS中的核心组件之一，用于展示大量结构化的数据，并支持排序、筛选、分页等功能。在这个例子中，我们将学习...
最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...
在这个"extjs+asp例子"中，我们将探讨如何整合这两个技术。 1. **ExtJS简介** ExtJS 提供了多种预定义的UI组件，如网格、表单、菜单、工具栏等，这些组件都具有高度可定制性和响应式设计。通过使用MVC（Model-View...
### EXTJS分页全面分析 在本篇内容中，我们将深入了解EXTJS中`GridPanel`分页技术的具体实现方法，并通过实例代码详细解析其工作原理和技术要点。 #### 一、EXTJS GridPanel分页概述 在EXTJS框架中，`GridPanel`...
EXTJS Grid是一款强大的数据展示组件，广泛应用于Web应用开发中，尤其在数据密集型界面设计时，EXTJS Grid以其高效的数据加载、灵活的分页、排序、过滤和自定义功能而受到开发者青睐。本总结例子将深入探讨EXTJS ...
这个例子展示了如何在ExtJS中实现CRUD操作的基本流程，包括创建模型、定义存储、展示数据以及添加编辑、创建和删除功能。实际应用中，你可能需要根据具体需求进行更复杂的定制，比如处理错误、实现分页、增加过滤和...
总的来说，这个例子是学习ExtJS与Servlet集成的一个良好起点，涵盖了前端展示、后端处理和数据库交互的基本流程。通过实践这个例子，开发者可以深入理解这两者如何协同工作，为构建更复杂的Web应用打下坚实基础。