Ajax分页插件Pagination从前台jQuery到后端java总结


Posted in Javascript onJuly 22, 2016

困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目。下面我要分享下我这个项目的分页代码,前后端通吃。希望前辈多多指教。

一、效果图

下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码。

Ajax分页插件Pagination从前台jQuery到后端java总结

Ajax分页插件Pagination从前台jQuery到后端java总结

二、上代码前的一些知识点

此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。

Ajax分页插件Pagination从前台jQuery到后端java总结

三、前台代码部分

var pageSize =6; //每页显示多少条记录
var total; //总共多少记录
 $(function() {
 Init(0); //注意参数,初始页面默认传到后台的参数,第一页是0; 
 $("#Pagination").pagination(total, { //total不能少 
 callback: PageCallback, 
 prev_text: '上一页', 
 next_text: '下一页', 
 items_per_page: pageSize, 
 num_display_entries: 4, //连续分页主体部分显示的分页条目数
 num_edge_entries: 1, //两侧显示的首尾分页的条目数 
 }); 
 function PageCallback(index, jq) { //前一个表示您当前点击的那个分页的页数索引值,后一个参数表示装载容器。 
 Init(index); 
 }
 });
 
 function Init(pageIndex){ //这个参数就是点击的那个分页的页数索引值,第一页为0,上面提到了,下面这部分就是AJAX传值了。
 $.ajax({
 type: "post",
 url:"../getContentPaixuServ?Cat="+str+"&rows="+pageSize+"&page="+pageIndex,
 async: false,
 dataType: "json",
 success: function (data) {
 $(".neirong").empty();
/* total = data.total; */
 var array = data.rows;
 for(var i=0;i<array.length;i++){
 var info=array[i];
 
 if(info.refPic != null){
 $(".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>') 
 }else{
 $(".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>');
 };
 } 
 },
 error: function () {
 alert("请求超时,请重试!");
 }
 }); 
};

四、后台部分(java)
我用的是MVC 3层模型

servlet部分: (可以跳过)

public void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {

 response.setContentType("text/html;charset=utf-8");
 PrintWriter out = response.getWriter();
 //获取分页参数
 String p=request.getParameter("page"); //当前第几页(点击获取)
 int page=Integer.parseInt(p);
 
 String row=request.getParameter("rows"); //每页显示多少条记录
 int rows=Integer.parseInt(row);
 
 String s=request.getParameter("Cat"); //栏目ID
 int indexId=Integer.parseInt(s);
 JSONObject object=(new ContentService()).getContentPaiXuById(indexId, page, rows); 
 out.print(object);
 out.flush();
 out.close();
 }

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,以此类推

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

Dao层: (可以跳过)

public List selectIndexById(int indexId){
 List<Content>list=new ArrayList<Content>();
 try{
 conn = DBConn.getCon();
 String sql = "select * from T_Content,T_User where T_Content.AuthorId = T_User.UserId and CatlogId=? order by CreateDate desc";
 pstm = conn.prepareStatement(sql);
 pstm.setInt(1, indexId);
 rs = pstm.executeQuery();
 SimpleDateFormat ff=new SimpleDateFormat("yyyy年MM月dd日 hh时mm分");
 while(rs.next()){
 Content content = new Content();
 content.setContentId(rs.getInt("ContentId"));
  content.setCaption(rs.getString("Caption"));
  content.setCreateDate(f.format(rs.getTimestamp("CreateDate")));
  content.setTimes(rs.getInt("Times"));
  content.setSource(rs.getString("Source"));
  content.setText(rs.getString("Text"));
  content.setPic(rs.getString("Pic"));
  content.setRefPic(rs.getString("RefPic"));
  content.setHot(rs.getInt("Hot"));
  User user = new User();
  user.setUserId(rs.getInt("UserId"));
  content.setAuthorId(user);
  Catlog catlog = new Catlog(); //CntURL待开发
  catlog.setCatlogId(rs.getInt("CatlogId"));
  content.setCatlog(catlog);
  list.add(content);
 }
 }catch(Exception e){
 e.printStackTrace();
 }finally{
 DBConn.closeDB(conn, pstm, rs);
 }
 return list;
 }

精彩专题分享:jquery分页功能操作  JavaScript分页功能操作

以上就是网页所实现的分页代码,easy-ui部分的分页也可以参考以上代码。

Javascript 相关文章推荐
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
ES5新增数组的实现方法
May 12 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 #Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 #Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 #Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 #Javascript
高效Web开发的10个jQuery代码片段
Jul 22 #Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 #Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 #Javascript
You might like
数据库相关问题
2006/10/09 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
使用pdb模块调试Python程序实例
2015/06/02 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
python 自动批量打开网页的示例
2019/02/21 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
python标准库os库的函数介绍
2020/02/12 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
如何进行Linux分区优化
2013/02/12 面试题
学前教育毕业生自荐信
2013/10/29 职场文书
运动会方阵口号
2014/06/07 职场文书
公司离职证明范本
2014/10/17 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python