Ajax paging plug-in Pagination from the front-end jQuery to the back-end java summary, paginationjquery

Ajax paging plug-in Pagination from the front-end jQuery to the back-end java summary, paginationjquery

I am confused about my webpage pagination for a while. Today I specially sorted out my project that was just completed. Next I want to share the paging code of my project, which can be used both on the front and back ends. I hope my predecessors will give you more advice.

I,

Next I will first go to the front-end page and the management page of the webpage. They use a set of code.

Ii. Some knowledge points before code

This jQuery plug-in is an Ajax paging plug-in that can be loaded at a time. Therefore, there is no need for refreshing and delay during paging switching. If the data volume is large, this method is not recommended because loading is slow.

Iii. Front-end code

Var pageSize = 6; // The number of records displayed on each page var total; // The total number of records $ (function () {Init (0); // pay attention to the parameter, parameters uploaded to the background on the initial Page by default. The first page is 0; $ ("# Pagination "). pagination (total, {// total cannot be less callback: PageCallback, prev_text: 'previous page', next_text: 'Next page', items_per_page: pageSize, num_display_entries: 4, // Number of pagination entries displayed in the continuous paging main part num_edge_entries: 1, // number of first and last pagination entries displayed on both sides}); function PageCallback (index, jq) {// the index of the number of pages on which you click the current page, and the last parameter indicates loading the container. Init (index) ;}}); function Init (pageIndex) {// this parameter is the index of the number of pages on which the page is clicked. the first page is 0. As mentioned above, the following part is the AJAX value transfer. $. 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> 
Iv. Background (java)
I am using a three-layer MVC model.
Servlet section:(Skip)
Public void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response. setContentType ("text/html; charset = UTF-8"); PrintWriter out = response. getWriter (); // obtain the paging parameter String p = request. getParameter ("page"); // current page (click to obtain) int page = Integer. parseInt (p); String row = request. getParameter ("rows"); // number of records displayed per page int rows = Integer. parseInt (row); String s = request. getParameter ("Cat"); // column ID int indexId = Integer. parseInt (s); JSONObject object = (new ContentService ()). getContentPaiXuById (indexId, page, rows); out. print (object); out. flush (); out. close ();}
Service Section:(Skip)
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; }
Obtain the start and end IDs of each page (this part is important) and write them in the Service. For example, if a page contains 6 entries, the id of the first page ranges from 1 to 6, the second page id is from 7 to 12, and so on
// Obtain the ID from which the content of each page starts and ends. Private List <Content> paginationContent (List <Content> list, int page, int rows) {List <Content> small = new ArrayList <Content> (); int beginIndex = rows * page; // rows indicates the number of content displayed on each page. page indicates the index value of the number of pages that I have previously stressed multiple clicks. the first page is 0, in this way, we can understand it! 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 layer:(Skip)

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 = p0000.exe cuteQuery (); SimpleDateFormat ff = new SimpleDateFormat ("MM mm dd, yyyy 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 User = new user (); User. setUserId (rs. getInt ("UserId"); content. setAuthorId (user); Catlog catlog = new Catlog (); // CntURL to be developed catlog. setCatlogId (rs. getInt ("CatlogId"); content. setCatlog (catlog); list. add (content) ;}} catch (Exception e) {e. printStackTrace ();} finally {DBConn. closeDB (conn, pstm, rs);} return list ;}
Special topics: jquery paging operation JavaScript paging operation
The above is the page Code implemented by the web page. For the pages in the easy-ui section, refer to the above Code.