欢迎来到福编程网,本站提供各种互联网专业知识!

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

发布时间:2016-07-22 作者:牧云云hhh 来源:转载
这篇文章主要从前台jQuery到后java端总结了Ajax分页插件Pagination的使用方法和技巧,感兴趣的小伙伴们可以参考一下

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

一、效果图

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

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

此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

'+info.caption+'

'+info.caption+' width=
'+info.text+'
发布时间:'+info.createDate+'') }else{ $(".neirong").append('

'+info.caption+'

'+info.text+'
发布时间:'+info.createDate+'
'); }; } }, 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();
 Listcontentlist1=(new ContentDao()).selectIndexById(indexId);
 Listcontentlist=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 paginationContent(List list,int page,int rows){
 Listsmall=new ArrayList();
 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

Dao层: (可以跳过)

public List selectIndexById(int indexId){
 Listlist=new ArrayList();
 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部分的分页也可以参考以上代码。

相关推荐