一：效果圖

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

回到頂部(go to top)

二：上代碼前的一些知識點

此jQuery插件為Ajax分頁插件，一次性加載，故分頁切換時無刷新與延遲，如果數據量較大不建議用此方法，因為加載會比較慢。

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

回到頂部(go to top)

三：前臺代碼部分

1 var pageSize =6; //每頁顯示多少條記錄2 var total; //總共多少記錄3 $(function() {4 Init(0); //注意參數，初始頁面默認傳到后臺的參數，第一頁是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, //連續分頁主體部分顯示的分頁條目數 11 num_edge_entries: 1, //兩側顯示的首尾分頁的條目數 12 }); 13 function PageCallback(index, jq) { //前一個表示您當前點擊的那個分頁的頁數索引值，后一個參數表示裝載容器。 14 Init(index); 15 } 16 }); 17 18 function Init(pageIndex){ //這個參數就是點擊的那個分頁的頁數索引值，第一頁為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><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>') 33 }else{ 34 $(".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>'); 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 //獲取分頁參數7 String p=request.getParameter("page"); //當前第幾頁（點擊獲取）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"); //欄目ID 14 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（這部分是重點），同樣寫在Service中，比如說假設一頁有6條內容，那么第一頁的id是從1到6，第二頁的id是從7到12，以此類推

1 //獲取出每頁的內容 從哪個ID開始到哪個ID結束。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是每頁顯示的內容數，page就是我前面強調多次的點擊的分頁的頁數的索引值，第一頁為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待開發 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 }

?

以上就是網頁所實現的分頁代碼，easy-ui部分的分頁也可以參考以上代碼。如果有所收獲，支持一下喲，謝謝！

轉載于:https://www.cnblogs.com/yulei126/p/6790059.html

總結

以上是生活随笔為你收集整理的Pagination(分页) 从前台到后端总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。