一：效果圖

下面我先上網(wǎng)頁前臺和管理端的部分分頁效果圖，他們用的是一套代碼。

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的潯陽網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

                                 

回到頂部(go to top)

二：上代碼前的一些知識點(diǎn)

此jQuery插件為Ajax分頁插件，一次性加載，故分頁切換時無刷新與延遲，如果數(shù)據(jù)量較大不建議用此方法，因?yàn)榧虞d會比較慢。

名	描述	參數(shù)值
maxentries	總條目數(shù)	必選參數(shù)，整數(shù)
items_per_page	每頁顯示的條目數(shù)	可選參數(shù)，默認(rèn)是10
num_display_entries	連續(xù)分頁主體部分顯示的分頁條目數(shù)	可選參數(shù)，默認(rèn)是10
current_page	當(dāng)前選中的頁面	可選參數(shù)，默認(rèn)是0，表示第1頁
num_edge_entries	兩側(cè)顯示的首尾分頁的條目數(shù)	可選參數(shù)，默認(rèn)是0
link_to	分頁的鏈接	字符串，可選參數(shù)，默認(rèn)是"#"
prev_text	“前一頁”分頁按鈕上顯示的文字	字符串參數(shù)，可選，默認(rèn)是"Prev"
next_text	“下一頁”分頁按鈕上顯示的文字	字符串參數(shù)，可選，默認(rèn)是"Next"
ellipse_text	省略的頁數(shù)用什么文字表示	可選字符串參數(shù)，默認(rèn)是"…"
prev_show_always	是否顯示“前一頁”分頁按鈕	布爾型，可選參數(shù)，默認(rèn)為true，即顯示“前一頁”按鈕
next_show_always	是否顯示“下一頁”分頁按鈕	布爾型，可選參數(shù)，默認(rèn)為true，即顯示“下一頁”按鈕
callback	回調(diào)函數(shù)	默認(rèn)無執(zhí)行效果

回到頂部(go to top)

三：前臺代碼部分

 1 var pageSize =6;     //每頁顯示多少條記錄 2 var total;           //總共多少記錄 3  $(function() { 4     Init(0); //注意參數(shù)，初始頁面默認(rèn)傳到后臺的參數(shù)，第一頁是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,        //連續(xù)分頁主體部分顯示的分頁條目數(shù)11              num_edge_entries: 1,           //兩側(cè)顯示的首尾分頁的條目數(shù) 12          });             
13         function PageCallback(index, jq) {     //前一個表示您當(dāng)前點(diǎn)擊的那個分頁的頁數(shù)索引值，后一個參數(shù)表示裝載容器。  14              Init(index);      
15         }16     });17  18  function Init(pageIndex){      //這個參數(shù)就是點(diǎn)擊的那個分頁的頁數(shù)索引值，第一頁為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><h4><a href="'+info.CntURL+'?ContentId='+info.contentId+'" title="'+info.caption+'" >'+info.caption+'</a></h4><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>發(fā)布時間：'+info.createDate+'</span></dl>') 
33                 }else{34                 $(".neirong").append('<dl ><h4><a href="'+info.CntURL+'?ContentId='+info.contentId+'" title="'+info.caption+'" >'+info.caption+'</a></h4><dd class="shortdd">'+info.text+'</dd><span>發(fā)布時間：'+info.createDate+'</span></dl>');35                 };36          }       
37       },38       error: function () {39           alert("請求超時，請重試！");40       }41     });  
42 };

 

回到頂部(go to top)

四：后臺部分（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         //獲取分頁參數(shù) 7         String p=request.getParameter("page"); //當(dāng)前第幾頁（點(diǎn)擊獲?。?nbsp;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");   //欄目ID14         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（這部分是重點(diǎn)），同樣寫在Service中，比如說假設(shè)一頁有6條內(nèi)容，那么第一頁的id是從1到6，第二頁的id是從7到12，以此類推

 1     //獲取出每頁的內(nèi)容 從哪個ID開始到哪個ID結(jié)束。 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是每頁顯示的內(nèi)容數(shù)，page就是我前面強(qiáng)調(diào)多次的點(diǎn)擊的分頁的頁數(shù)的索引值，第一頁為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待開發(fā)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      }

 

以上就是網(wǎng)頁所實(shí)現(xiàn)的分頁代碼，easy-ui部分的分頁也可以參考以上代碼。如果有所收獲，支持一下喲，謝謝！

本文題目：Pagination(分頁)從前臺到后端總結(jié)
當(dāng)前URL：http://jinyejixie.com/article2/ppejic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站內(nèi)鏈、Google、網(wǎng)站導(dǎo)航、服務(wù)器托管、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)