Ext分页实现(前台与后台)
Ext分页实现(前台与后台)Spring+Mybatis
一、项目背景
关于Ext的分页网上有很多博客都有提到,但是作为Ext新手来说,并不能很容易的在自己的项目中得以应用。因为,大多数教程以及博客基本都是只写了前端的东西,而关于分页算法更多的应该是后台。并且大多数数据库的sql基本都是通用的,但是对于分页sql语句来讲,不同的数据库,又有着自己不同的语句。在本篇博文中,博主将详细介绍关于Ext前端与后台的实现。项目所采用的数据库是sql server,项目架构是Spring+Mybatis。
二、分页前台实现
在前台分页中客户端发送参数到服务器端,服务器需要解析并且做出响应,返回相应的数据。Ext.toolbar.Paging是专用的分页工具栏,绑定数据并提供自动分页控制。通过传递参数来控制分页。
var itemsPerPage= ; // 设置你想要的每页显示条数 var store = Ext.create('Ext.data.Store', {
id:'simpsonsStore',
autoLoad:{start:,limit:itemsPerPage},
fields:['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'pagingstore.js', // 请求URL加载数据
reader: {
type: 'json',
root: 'items',
totalProperty: 'total'
}
}
});
在上述代码中是属于Ext的分页的前端代码,其中有这样几个属性必须特别注意,autoLoad:{start:0,limit:itemsPerPage},,与数据有关的items,与分页有关的total,这些需要和我们的后台进行一一对应的关系。在实现后台时候,将会详细进行解释。
二、后台实现
在后台中,我们已经将Spring+Mybatis的架构搭建完成,并且在sql server数据库中有这样一张表(Company),表中包含了3个字段,CompId,CompName,CompNum。根据数据库完成主要的实体书写,XML文件书写,MappingDao。
接下来,为了进行分页,我们需要写一个Page类其主要代码如下:
package com.test.util; public class Page {
private int start;
private int limit;
public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
this.limit = limit;
}
public Integer getPage(){
return (start/limit)+;
} }
分页的sql语句,因为ext传递到前台的只有两个值,所以将sql语句如所示,其中关于传递整数应该使用${}方式。“>”是“>”。其中的参数是Page对象。
<!-- 分页算法 -->
<select id="findPage" parameterType="com.test.util.Page" resultType="com.entity.Company">
SELECT TOP ${limit} *FROM
(SELECT ROW_NUMBER() OVER (ORDER BY compId) AS RowNumber,* FROM Company) as A
WHERE RowNumber > ${limit}*(${page}-)
</select>
Controller代码
//前台ajax获取路径的url
@RequestMapping("/testList")
public void datalist(HttpServletRequest req,HttpServletResponse res) throws Exception{
res.setContentType("text/plain");
int start = Integer.parseInt(req.getParameter("start"));//从前台传递的值
int limit = Integer.parseInt(req.getParameter("limit"));
Page page = new Page();
page.setStart(start);
page.setLimit(limit);
List<Company> list = dao.findPage(page);
//数据总的记录数
int x = dao.findTotalNum();
JSONArray jsonArray = JSONArray.fromObject(list);
StringBuffer sb = new StringBuffer();
sb.append("{");
sb.append("total:" + x + ",");
sb.append("items:");
sb.append(jsonArray.toString());
sb.append("}");
AjaxResponse.sendResponse(req,res,sb);
}
在上述代码中,其中的total与items也与前台代码中的保持一致。这样Ext的分页也就完全实现了。
总结
关于Ext的分页,前端代码比较简单,更主要的是后台的逻辑,不同数据库的分页sql应该如何书写,以及参数如何传递接收等。其他后台语言的代码与此类似。
Ext分页实现(前台与后台)的更多相关文章
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
经过上一篇博客,本节主要是来看实现的功能是后台的数据通过json数据传过来,前台修改的数据再传回数据库之后页面再次更新table中的数据: 图示: 实例:前台的代码 <%--表格显示区--%&g ...
- MVC 前台向后台传输数据
今天,我们一起来学习下.MVC如何在前台给后台传输数据 (1)前台传输数据到后台 具体思路:前台拼凑json字符串,然后通过 get 或 post 方式,传递到后台 Action 方法中 我现在前台展 ...
- 由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——实践篇(二)
在由ASP.NET所谓前台调用后台.后台调用前台想到HTTP——理论篇中描述了一下ASP.NET新手的三个问题及相关的HTTP协议内容,在由ASP.NET所谓前台调用后台.后台调用前台想到HTTP—— ...
- 由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——理论篇
工作两年多了,我会经常尝试给公司小伙伴儿们解决一些问题,几个月下来我发现初入公司的小朋友最爱问的问题就三个 1. 我想前台调用后台的XXX方法怎么弄啊? 2. 我想后台调用前台的XXX JavaScr ...
- C#和JavaScript交互(asp.net前台和后台互调)总结 (转)
http://www.cnblogs.com/poleices/archive/2011/02/24/1963727.html C#代码与javaScript函数的相互调用: 1.如何在JavaScr ...
- shell下,进程的前台与后台运行
跟系统任务相关的几个命令:fg.bg.jobs.&.ctrl+z1. & 最经常被用到 这个用在一个命令的最后,可以把这个命令放到后台执行2. ctrl + z 可以将一个 ...
- [转] 在Asp.net前台和后台弹出提示框
一.在前台弹出提示框 1.点击"A"标记或者"控件按钮"弹出提示框 <asp:LinkButton ID="lbtnDel" runa ...
- android判断当前应用程序处于前台还是后台
/** *判断当前应用程序处于前台还是后台 * * @param context * @return */ public static boolean ...
- js前台与后台数据交互-前台调后台
转自:http://blog.csdn.net/wang379275614/article/details/17033981 网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数 ...
随机推荐
- .NET 版本区别,以及与 Windows 的关系
老是记不住各 Windows 版本中的 .NET 版本号,下面汇总一下: .NET Framework各版本汇总以及之间的关系 Mailbag: What version of the .NET Fr ...
- Angular2中对ASP.NET MVC跨域访问
应用场景 项目开发决定使用angular2进行前后端分离开发,由我负责后端服务的开发,起初选择的是web api进行开发.对跨域访问通过API中间件+过滤器对跨域访问进行支持.开发一段后,通知需要移植 ...
- Mybatis的choose when otherwise
<select id="getCount" resultType="int"> select count(1) from <choose> ...
- FunDA(1)- Query Result Row:强类型Query结果行
FunDA的特点之一是以数据流方式提供逐行数据操作支持.这项功能解决了FRM如Slick数据操作以SQL批次模式为主所产生的问题.为了实现安全高效的数据行操作,我们必须把FRM产生的Query结果集转 ...
- 解决springmvc+mybatis+mysql中文乱码问题【转】
这篇文章主要介绍了解决java中springmvc+mybatis+mysql中文乱码问题的相关资料,需要的朋友可以参考下 近日使用ajax请求springmvc后台查询mysql数据库,页面显示中文 ...
- JS高程5.引用类型(3)Array类型-检测数组
1. instanceof操作符(ECMAScript3) 对于一个网页,或者是一个全局作用域而言,使用instanceof操作符来检测数组就可以得到满意的结果. 语法:if(value instan ...
- [deviceone开发]-do_Webview的基本示例
一.简介 这个示例是webview的基础demo,加载了本地html文件,一个html做的登录的表单.这个示例也展示了webview里加载的html里的js代码怎么调用deviceone的SM,MM和 ...
- GO 1.5 代码编译安装 [centos7 64位]
2015年8月,Go 1.5 正式发布,这是 Go 的第六个重要版本. 此版本包括大量重大改进,编译工具链从 C 转换到 Go,从 Go 代码库中完全移除 C 代码.完完全全重新设计了垃圾收集器,减少 ...
- asp.net web api 的版本升级到 2.2的记录
asp.net web api 的版本 升级到 2.2的记录 asp.net web api 2.2相比1.0提升了不少 而且其中最重要的就是有了在线文档的自动字段注释的功能 再也不用写详细的字段说明 ...
- ViewPager 重新加载 及 PagerAdapter 使用
PagerAdapter 简介 PagerAdapter是android.support.v4包中的类,它的子类有FragmentPagerAdapter, FragmentStatePagerAda ...