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 相关文章推荐
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
小程序和web画三角形实现解析
Sep 02 Javascript
vue开发简单上传图片功能
Jun 30 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
Python中asyncore的用法实例
2014/09/29 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
Python与R语言的简要对比
2017/11/14 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Pytorch之Variable的用法
2019/12/31 Python
python利用线程实现多任务
2020/09/18 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python