Pagination(分页) 从前台到后端总结
一:效果图
下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码。
二:上代码前的一些知识点
此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。
名 | 描述 | 参数值 |
maxentries | 总条目数 | 必选参数,整数 |
items_per_page | 每页显示的条目数 | 可选参数,默认是10 |
num_display_entries | 连续分页主体部分显示的分页条目数 | 可选参数,默认是10 |
current_page | 当前选中的页面 | 可选参数,默认是0,表示第1页 |
num_edge_entries | 两侧显示的首尾分页的条目数 | 可选参数,默认是0 |
link_to | 分页的链接 | 字符串,可选参数,默认是"#" |
prev_text | “前一页”分页按钮上显示的文字 | 字符串参数,可选,默认是"Prev" |
next_text | “下一页”分页按钮上显示的文字 | 字符串参数,可选,默认是"Next" |
ellipse_text | 省略的页数用什么文字表示 | 可选字符串参数,默认是"…" |
prev_show_always | 是否显示“前一页”分页按钮 | 布尔型,可选参数,默认为true,即显示“前一页”按钮 |
next_show_always | 是否显示“下一页”分页按钮 | 布尔型,可选参数,默认为true,即显示“下一页”按钮 |
callback | 回调函数 | 默认无执行效果 |
三:前台代码部分

1 var pageSize =6; //每页显示多少条记录
2 var total; //总共多少记录
3 $(function() {
4 Init(0); //注意参数,初始页面默认传到后台的参数,第一页是0;
5 $("#Pagination").pagination(total, { //total不能少
6 callback: PageCallback,
7 prev_text: '上一页',
8 next_text: '下一页',
9 items_per_page: pageSize,
10 num_display_entries: 4, //连续分页主体部分显示的分页条目数
11 num_edge_entries: 1, //两侧显示的首尾分页的条目数
12 });
13 function PageCallback(index, jq) { //前一个表示您当前点击的那个分页的页数索引值,后一个参数表示装载容器。
14 Init(index);
15 }
16 });
17
18 function Init(pageIndex){ //这个参数就是点击的那个分页的页数索引值,第一页为0,上面提到了,下面这部分就是AJAX传值了。
19 $.ajax({
20 type: "post",
21 url:"../getContentPaixuServ?Cat="+str+"&rows="+pageSize+"&page="+pageIndex,
22 async: false,
23 dataType: "json",
24 success: function (data) {
25 $(".neirong").empty();
26 /* total = data.total; */
27 var array = data.rows;
28 for(var i=0;i<array.length;i++){
29 var info=array[i];
30
31 if(info.refPic != null){
32 $(".neirong").append('<dl><h3><a href="'+info.CntURL+'?ContentId='+info.contentId+'" title="'+info.caption+'" >'+info.caption+'</a></h3><dt><a href="sjjm.jsp?ContentId='+info.contentId+'" title="'+info.caption+'" ><img src="<%=basePathPic%>'+info.refPic+'" alt="'+info.caption+' width="150" height="95""></a></dt> <dd class="shortdd">'+info.text+'</dd><span>发布时间:'+info.createDate+'</span></dl>')
33 }else{
34 $(".neirong").append('<dl ><h3><a href="'+info.CntURL+'?ContentId='+info.contentId+'" title="'+info.caption+'" >'+info.caption+'</a></h3><dd class="shortdd">'+info.text+'</dd><span>发布时间:'+info.createDate+'</span></dl>');
35 };
36 }
37 },
38 error: function () {
39 alert("请求超时,请重试!");
40 }
41 });
42 };

四:后台部分(java)
我用的是MVC 3层模型
servlet部分:(可以跳过)

1 public void doPost(HttpServletRequest request, HttpServletResponse response)
2 throws ServletException, IOException {
3
4 response.setContentType("text/html;charset=utf-8");
5 PrintWriter out = response.getWriter();
6 //获取分页参数
7 String p=request.getParameter("page"); //当前第几页(点击获取)
8 int page=Integer.parseInt(p);
9
10 String row=request.getParameter("rows"); //每页显示多少条记录
11 int rows=Integer.parseInt(row);
12
13 String s=request.getParameter("Cat"); //栏目ID
14 int indexId=Integer.parseInt(s);
15 JSONObject object=(new ContentService()).getContentPaiXuById(indexId, page, rows);
16 out.print(object);
17 out.flush();
18 out.close();
19 }

Service部分:(可以跳过)

public JSONObject getContentPaiXuById(int indexId, int page, int rows) {
JSONArray array=new JSONArray();
List<Content>contentlist1=(new ContentDao()).selectIndexById(indexId);
List<Content>contentlist=paginationContent(contentlist1,page,rows);
for(Content content:contentlist){
JSONObject object=new JSONObject();
object.put("contentId", content.getContentId());
object.put("caption", content.getCaption());
object.put("createDate", content.getCreateDate());
object.put("times", String.valueOf(content.getTimes()));
object.put("source", content.getSource());
object.put("text", content.getText());
object.put("pic", content.getPic());
object.put("refPic", content.getRefPic());
object.put("hot", content.getHot());
object.put("userId", content.getAuthorId().getUserId());
int id = content.getAuthorId().getUserId();
String ShowName = (new UserService()).selectUserById(id).getString("ShowName");
object.put("showName", ShowName);
array.add(object); }
JSONObject obj=new JSONObject();
obj.put("total", contentlist1.size());
obj.put("rows", array);
return obj;
}

获取出每页的的起止id(这部分是重点),同样写在Service中,比如说假设一页有6条内容,那么第一页的id是从1到6,第二页的id是从7到12,以此类推

1 //获取出每页的内容 从哪个ID开始到哪个ID结束。
2 private List<Content> paginationContent(List<Content> list,int page,int rows){
3 List<Content>small=new ArrayList<Content>();
4 int beginIndex=rows*page; //rows是每页显示的内容数,page就是我前面强调多次的点击的分页的页数的索引值,第一页为0,这样子下面就好理解了!
5 System.out.println(beginIndex);
6 int endIndex;
7 if(rows*(page+1)>list.size()){
8 endIndex=list.size();
9 }
10 else{
11 endIndex=rows*(page+1);
12 }
13 for(int i=beginIndex;i<endIndex;i++){
14 small.add(list.get(i));
15 }
16 return small;
17 }

Dao层:(可以跳过)

1 public List selectIndexById(int indexId){
2 List<Content>list=new ArrayList<Content>();
3 try{
4 conn = DBConn.getCon();
5 String sql = "select * from T_Content,T_User where T_Content.AuthorId = T_User.UserId and CatlogId=? order by CreateDate desc";
6 pstm = conn.prepareStatement(sql);
7 pstm.setInt(1, indexId);
8 rs = pstm.executeQuery();
9 SimpleDateFormat ff=new SimpleDateFormat("yyyy年MM月dd日 hh时mm分");
10 while(rs.next()){
11 Content content = new Content();
12 content.setContentId(rs.getInt("ContentId"));
13 content.setCaption(rs.getString("Caption"));
14 content.setCreateDate(f.format(rs.getTimestamp("CreateDate")));
15 content.setTimes(rs.getInt("Times"));
16 content.setSource(rs.getString("Source"));
17 content.setText(rs.getString("Text"));
18 content.setPic(rs.getString("Pic"));
19 content.setRefPic(rs.getString("RefPic"));
20 content.setHot(rs.getInt("Hot"));
21 User user = new User();
22 user.setUserId(rs.getInt("UserId"));
23 content.setAuthorId(user);
24 Catlog catlog = new Catlog(); //CntURL待开发
25 catlog.setCatlogId(rs.getInt("CatlogId"));
26 content.setCatlog(catlog);
27 list.add(content);
28 }
29 }catch(Exception e){
30 e.printStackTrace();
31 }finally{
32 DBConn.closeDB(conn, pstm, rs);
33 }
34 return list;
35 }

以上就是网页所实现的分页代码,easy-ui部分的分页也可以参考以上代码。如果有所收获,支持一下哟,谢谢!
Pagination(分页) 从前台到后端总结的更多相关文章
- jq pagination分页 全选、单选的思考
$().pagination(总条数,配置项); 后端分页的跨页选择: 思路:把浏览过的页整体保存为,整体拥有 curPage(当前页码).allChoice(当前页是否全选).selected当前页 ...
- Ext分页实现(前台与后台)
Ext分页实现(前台与后台)Spring+Mybatis 一.项目背景 关于Ext的分页网上有很多博客都有提到,但是作为Ext新手来说,并不能很容易的在自己的项目中得以应用.因为,大多数教程以及博客基 ...
- Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记
入职以后的第二个任务 根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...
- EasyUI基础入门之Pagination(分页)
前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...
- doT.js模板和pagination分页应用
doT.js模板和pagination分页应用 博客中模拟了数据加载初始化的过程.doT.js渲染每一项内容的数据项.示例如下: <script id="Messtmpl" ...
- jQuery Pagination分页插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 第二百零九节,jQuery EasyUI,Pagination(分页)组件
jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...
- Django框架 之 Pagination分页实现
Django框架 之 Pagination分页实现 浏览目录 自定义分页 Django内置分页 一.自定义分页 1.基础版自定义分页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...
- jQuery Pagination分页插件--刷新
源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...
随机推荐
- 第一次用上 Android Studio 2.3 过程及错误解决
因为要开发Android5.0的缘故,抛弃了eclipse转到了Android Studio,第一次使用就是遇到了许多问题,终于是解决问题了,特意写一篇博文给各位要准备从eclipse转到Androi ...
- Jmeter之解决烦人的中文乱码问题
Jmeter是一款国外开源工具,所以就跟LR一样,对中文的支持不是很好,经常会有同学录制脚本后回放或者是发送HTTP请求,看到响应报文里面有乱码! 那如何才能解决这个问题呢?我们分2个情况来分析: 一 ...
- Tensorflow之MNIST解析
要说2017年什么技术最火爆,无疑是google领衔的深度学习开源框架Tensorflow.本文简述一下深度学习的入门例子MNIST. 深度学习简单介绍 首先要简单区别几个概念:人工智能,机器学习,深 ...
- Java基础---IO(二)--File类、Properties类、打印流、序列流(合并流)
第一讲 File类 一.概述 1.File类:文件和目录路径名的抽象表现形式 2.特点: 1)用来将文件或文件夹封装成对象 2)方便于对文件与文件夹的属性信息进行操作 3)File类的实例是不 ...
- [2014-09-18]Entity Framework 6 预热、启动优化
好久没写博客了,终于憋出了一个大招,现在总结下. 虽然文章题目是针对EF的,但涉及的内容不仅仅是EF. 场景介绍 目前在做的一个项目,行业门户,项目部分站点按域名划分如下: user.xxx.com: ...
- Linux上Oracle自动启停方案
环境 CentOS 6 x86_64, Oracle 11g R2 方案 Oracle在$ORACLE_HOME/bin目录下提供了dbstart和dbshut两个脚本来启动和停止Oracle.d ...
- MySQL视图view/存储过程和函数的使用
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...
- java_jstl 标签库
jstl标签库的使用以及介绍 jstl:jsp标准标签库,是jsp的标签集合,它里面封装了jsp通用的核心功能,比如:建构化的任务,迭代,条件判断,xml 文档的操作,国际化标签,sql标签,还提供框 ...
- log4j与log4j.properties的配置
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt233 摘要: 一.配置步骤 1. 在应用程序中使用log4j 2. 把l ...
- 8.中断按键驱动程序之poll机制
本节继续在上一节中断按键程序里改进,添加poll机制. 那么我们为什么还需要poll机制呢.之前的测试程序是这样: ) { read(fd, &key_val, ); printf(" ...