Ajax分页插件Pagination从前台jQuery到后端java总结
更新时间:2016年7月29日 10:00 点击:1870
困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目。下面我要分享下我这个项目的分页代码,前后端通吃。希望前辈多多指教。
一、效果图
下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码。
二、上代码前的一些知识点
此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。
三、前台代码部分
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部分的分页也可以参考以上代码。
相关文章
- 这篇文章主要介绍了jquery实现加载更多"转圈圈"效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-11-10
- 最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性...2015-10-30
- 有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考,具体如下:先来看如下运行效果截图:在线演示地址如下:http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-05
- 这篇文章主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下...2016-01-21
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
- 这篇文章主要介绍了jQuery获得字体颜色16位码的方法,涉及jQuery样式操作及正则表达式使用技巧,非常简单实用,需要的朋友可以参考下...2016-02-23
- JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
- 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过,不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31
- 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07
jquery中常用的SET和GET$(”#msg”).html循环介绍
复制代码 代码如下: $(”#msg”).html(); //返回id为msg的元素节点的html内容。 $(”#msg”).html(”new content“); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(”...2013-10-13jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合...2014-05-31jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
借助jQuery我们可以轻松地堆DOM元素进行向上、向下遍历以及同级的遍历,本文我们即来整理jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结:...2016-07-25- jquery中jquery.offset().top / left用于获取div距离窗口的距离,jquery.position().top / left 用于获取距离父级div的距离(必须是绝对定位的div)。 (1)先介绍jquery.offset().top / left css: 复制代码 代码如下: *{ mar...2013-10-13
- 本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码。分享给大家供大家参考,具体如下:这里介绍jQuery实现有动画淡出效果的二级折叠菜单代码,相当不错,因考虑功能的实现,所以没有怎么美化,不过这样也好,可以给大家更...2015-10-21
- 有时候我们为了省事就操作键盘组合键去代替使用鼠标,我们今天就使用JQuery实现Ctrl+Enter提交表单。我们发帖时,在内容输入框中输入完内容后,可以点击“提交”按钮来发表内容。可是,如果你够“懒”,你可以不用动鼠标,只需按...2015-10-23
- 在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互目的....2016-04-27
- 最近由于项目的需要,需要动态的添加和删除table中的tr,感觉用JS可以实现,但是在网上找了一下,单纯的自己写JS,感觉太麻烦,而且也不好维护。于是想到了最近学的jQuery。这篇文章给大家用实例介绍了jQuery动态添加与删除tr行的方法,有需要的朋友们可以参考借鉴。...2016-10-20