Ajax分頁(yè)插件Pagination從前臺(tái)jQuery到后端java總結(jié)
困惑了我一段時(shí)間的網(wǎng)頁(yè)分頁(yè),今天特地整理了一下我完成不久的項(xiàng)目。下面我要分享下我這個(gè)項(xiàng)目的分頁(yè)代碼,前后端通吃。希望前輩多多指教。
一、效果圖
下面我先上網(wǎng)頁(yè)前臺(tái)和管理端的部分分頁(yè)效果圖,他們用的是一套代碼。
二、上代碼前的一些知識(shí)點(diǎn)
此jQuery插件為Ajax分頁(yè)插件,一次性加載,故分頁(yè)切換時(shí)無(wú)刷新與延遲,如果數(shù)據(jù)量較大不建議用此方法,因?yàn)榧虞d會(huì)比較慢。
三、前臺(tái)代碼部分
var pageSize =6; //每頁(yè)顯示多少條記錄 var total; //總共多少記錄 $(function() { Init(0); //注意參數(shù),初始頁(yè)面默認(rèn)傳到后臺(tái)的參數(shù),第一頁(yè)是0; $("#Pagination").pagination(total, { //total不能少 callback: PageCallback, prev_text: '上一頁(yè)', next_text: '下一頁(yè)', items_per_page: pageSize, num_display_entries: 4, //連續(xù)分頁(yè)主體部分顯示的分頁(yè)條目數(shù) num_edge_entries: 1, //兩側(cè)顯示的首尾分頁(yè)的條目數(shù) }); function PageCallback(index, jq) { //前一個(gè)表示您當(dāng)前點(diǎn)擊的那個(gè)分頁(yè)的頁(yè)數(shù)索引值,后一個(gè)參數(shù)表示裝載容器。 Init(index); } }); function Init(pageIndex){ //這個(gè)參數(shù)就是點(diǎn)擊的那個(gè)分頁(yè)的頁(yè)數(shù)索引值,第一頁(yè)為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>發(fā)布時(shí)間:'+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>發(fā)布時(shí)間:'+info.createDate+'</span></dl>'); }; } }, error: function () { alert("請(qǐng)求超時(shí),請(qǐng)重試!"); } }); };
四、后臺(tái)部分(java)
我用的是MVC 3層模型
servlet部分: (可以跳過(guò))
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); //獲取分頁(yè)參數(shù) String p=request.getParameter("page"); //當(dāng)前第幾頁(yè)(點(diǎn)擊獲?。? int page=Integer.parseInt(p); String row=request.getParameter("rows"); //每頁(yè)顯示多少條記錄 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部分:(可以跳過(guò))
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; }
獲取出每頁(yè)的的起止id(這部分是重點(diǎn)),同樣寫在Service中,比如說(shuō)假設(shè)一頁(yè)有6條內(nèi)容,那么第一頁(yè)的id是從1到6,第二頁(yè)的id是從7到12,以此類推
//獲取出每頁(yè)的內(nèi)容 從哪個(gè)ID開始到哪個(gè)ID結(jié)束。 private List<Content> paginationContent(List<Content> list,int page,int rows){ List<Content>small=new ArrayList<Content>(); int beginIndex=rows*page; //rows是每頁(yè)顯示的內(nèi)容數(shù),page就是我前面強(qiáng)調(diào)多次的點(diǎn)擊的分頁(yè)的頁(yè)數(shù)的索引值,第一頁(yè)為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層: (可以跳過(guò))
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時(shí)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待開發(fā) 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分頁(yè)功能操作 JavaScript分頁(yè)功能操作
以上就是網(wǎng)頁(yè)所實(shí)現(xiàn)的分頁(yè)代碼,easy-ui部分的分頁(yè)也可以參考以上代碼。
- jQuery Pagination Ajax分頁(yè)插件(分頁(yè)切換時(shí)無(wú)刷新與延遲)中文翻譯版
- jquery分頁(yè)插件jquery.pagination.js使用方法解析
- Jquery 分頁(yè)插件之Jquery Pagination
- 最實(shí)用的jQuery分頁(yè)插件
- 分享一個(gè)自己動(dòng)手寫的jQuery分頁(yè)插件
- jQuery ajax分頁(yè)插件實(shí)例代碼
- 基于bootstrap3和jquery的分頁(yè)插件
- jQuery插件分享之分頁(yè)插件jqPagination
- jquery ajax分頁(yè)插件的簡(jiǎn)單實(shí)現(xiàn)
- jquery+css3打造一款ajax分頁(yè)插件(自寫)
- 使用JQuery實(shí)現(xiàn)的分頁(yè)插件分享
- jQuery實(shí)現(xiàn)的分頁(yè)插件完整示例
相關(guān)文章
WordPress 照片lightbox效果的運(yùn)用幾點(diǎn)
應(yīng)該大家都知曉lightbox這類燈箱效果了,它一般更多地被運(yùn)用在網(wǎng)站照片的顯示上。當(dāng)然還有更推廣的應(yīng)用,如facebox這種更漂亮全面的效果。2009-06-06jquery.multiselect多選下拉框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jquery.multiselect 多選下拉框?qū)崿F(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11jQuery實(shí)現(xiàn)產(chǎn)品對(duì)比功能附源碼下載
一些電商網(wǎng)站產(chǎn)品或評(píng)測(cè)網(wǎng)站會(huì)為用戶提供產(chǎn)品對(duì)比的功能,用戶只需勾選多個(gè)需要對(duì)比的產(chǎn)品,就可以進(jìn)行比對(duì),下文給大家?guī)?lái)了jQuery實(shí)現(xiàn)產(chǎn)品對(duì)比功能,一起看下吧2016-08-08表單類各種類型(文本框)失去焦點(diǎn)效果jquery代碼
基于jquery實(shí)現(xiàn)表單類各種類型(文本框)失去焦點(diǎn)效果,代碼簡(jiǎn)單實(shí)用,感興趣的朋友可以參考下,希望對(duì)你有所幫助2013-04-04jQuery判斷瀏覽器并動(dòng)態(tài)調(diào)整select寬度的方法
這篇文章主要介紹了jQuery判斷瀏覽器并動(dòng)態(tài)調(diào)整select寬度的方法,涉及jQuery針對(duì)瀏覽器的判定及頁(yè)面元素屬性的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-03-03jQuery結(jié)合CSS制作動(dòng)態(tài)的下拉菜單
這篇文章主要介紹了jQuery結(jié)合CSS制作一個(gè)動(dòng)態(tài)的下拉菜單,下拉菜單可以彌補(bǔ)空間的不足,感興趣的小伙伴們可以參考一下2015-10-10