Js implements the paging function, and js implements Paging

Js implements the paging function, and js implements Paging

This article only records the writing process by yourself. If you are interested or have any questions, please contact me.

Background: one year of java development experience. The current project is an SSM framework and maven is used to manage projects. Page query is required to implement paging. Many plug-ins are found on the Internet. It is good to implement a single page. However, if I put it on my page, it will be ineffective and I cannot find the cause myself. Therefore, write the following code, it is very rough, but I am too lazy to organize it into js files.

Effect: when the first page is displayed, the homepage and previous page are not clickable. When the last page is displayed, the next and last pages are not clickable. Only five pages are displayed.

Implemented js:

// Paging function $ (document ). ready (function () {// obtain the number of pages var talPage =$ {countPage}; // obtain the current page number var pageIndex =$ {pageIndex}; var ul = document. getElementById ("getPage"); document. getElementById ("getPage "). innerHTML = ""; var li_0 = document. createElement ("li"); li_0.innerHTML = "Total:" + $ {count} + ", total:" + $ {countPage} + "Page, per page: 10 "; ul. appendChild (li_0); if (talPage = 1 | pageIndex = 1) {// the first page and the previous page cannot be operated var li_1 = do Cument. createElement ("li"); li_1.setAttribute ("class", "pageItemDisable bt4"); li_1.setAttribute ("onclick", "pageClick (this)") li_1.innerHTML = "Homepage"; ul. appendChild (li_1); var li_2 = document. createElement ("li"); li_2.setAttribute ("class", "pageItemDisable bt4"); li_2.setAttribute ("onclick", "pageClick (this)") li_2.innerHTML = "previous" ul. appendChild (li_2);} else {var li_1 = document. createElement ("li "); Li_1.setAttribute ("class", "pageItem bt4"); li_1.setAttribute ("onclick", "pageClick (this)") li_1.innerHTML = "Homepage"; ul. appendChild (li_1); var li_2 = document. createElement ("li"); li_2.setAttribute ("class", "pageItem bt4"); li_2.setAttribute ("onclick", "pageClick (this)") li_2.innerHTML = "Previous Page" ul. appendChild (li_2);} // before, when the previous page is created if (talPage <= 5) {// the total number of pages is between 0 and 5, display the actual page number for (var I = 0; I <talPage; I ++) {if (I + 1 = pageIndex) {// when the number of cycles is equal to the current page, the current page style var li = document. createElement ("li"); li. setAttribute ("class", "pageItemActive"); li. setAttribute ("onclick", "pageClick (this)") li. innerHTML = I + 1; ul. appendChild (li);} else {var li = document. createElement ("li"); li. setAttribute ("class", "pageItem"); li. setAttribute ("onclick", "pageClick (this)") li. innerHTML = I + 1; ul. appendChild (li) ;}} else if (talPage> 5) {// total page When the number is greater than 5, only five pages are displayed, and the extra hidden // when the current page location is determined if (pageIndex <= 3) {// when the current page is less than or equal to 3, show 1-5 for (var I = 0; I <5; I ++) {if (I + 1 = pageIndex) {// when the number of loops is equal to the current page, is the current page style var li = document. createElement ("li"); li. setAttribute ("class", "pageItemActive"); li. setAttribute ("onclick", "pageClick (this)") li. innerHTML = I + 1; ul. appendChild (li);} else {var li = document. createElement ("li"); li. setAttribute ("class", "pageItem"); li. setAttribute ("onclic K "," pageClick (this) ") li. innerHTML = I + 1; ul. appendChild (li) ;}} else if (pageIndex> talPage-5) {// when the current page is the last five pages for (var I = talPage-5; I <talPage; I ++) {if (I + 1 = pageIndex) {// when the number of cycles is equal to the current page, the current page style var li = document. createElement ("li"); li. setAttribute ("class", "pageItemActive"); li. setAttribute ("onclick", "pageClick (this)") li. innerHTML = I + 1; ul. appendChild (li);} else {var li = document. createElement ("li"); li. SetAttribute ("class", "pageItem"); li. setAttribute ("onclick", "pageClick (this)") li. innerHTML = I + 1; ul. appendChild (li) ;}}else {// the current page is in the middle of the for (var I = pageIndex-3; I <pageIndex + 2; I ++) {if (I + 1 = pageIndex) {// when the number of cycles is equal to the current page, the current page style var li = document. createElement ("li"); li. setAttribute ("class", "pageItemActive"); li. setAttribute ("onclick", "pageClick (this)") li. innerHTML = I + 1; ul. appendChild (li);} else {var Li = document. createElement ("li"); li. setAttribute ("class", "pageItem"); li. setAttribute ("onclick", "pageClick (this)") li. innerHTML = I + 1; ul. appendChild (li) ;}}}if (pageIndex = talPage) {// when the current page is the maximum page, the next and last pages cannot operate var li_3 = document. createElement ("li"); li_3.setAttribute ("class", "pageItemDisable bt4"); li_3.setAttribute ("onclick", "pageClick (this)") li_3.innerHTML = "Next" ul. appendChild (li_3); var Li_4 = document. createElement ("li"); li_4.setAttribute ("class", "pageItemDisable bt4"); li_4.setAttribute ("onclick", "pageClick (this)") li_4.innerHTML = "last page" ul. appendChild (li_4);} else {var li_3 = document. createElement ("li"); li_3.setAttribute ("class", "pageItem bt4"); li_3.setAttribute ("onclick", "pageClick (this)") li_3.innerHTML = "Next" ul. appendChild (li_3); var li_4 = document. createElement ("li "); Li_4.setAttribute ("class", "pageItem bt4"); li_4.setAttribute ("onclick", "pageClick (this)") li_4.innerHTML = "last page" ul. appendChild (li_4);} if (0 = talPage) {// a page does not exist at all. Set the homepage, Previous Page, next page, and last page as inoperable $ (". bt4 "). removeClass ("pageItem"); $ (". bt4 "). addClass ("pageItemDisable") ;}}); // click the pageItemDisable button to event function pageClick (obj) {var talPage =$ {countPage }; // total page number var pageIndex =$ {pageIndex}; // the current page number var text = obj. innerText; // click the icon Var url = "<% = path %>/service/getServiceList. action "; // returns false if ($ (obj ). attr ("class "). indexOf ("pageItemDisable")> = 0) {return false;} with (document. forms ["serviceForm"]) {if ("Homepage" = text) {action = url;} else if ("Previous Page" = text) {// calculate the page number of the previous page. // obtain the label of pageItemActive class in current li and obtain its value. // The second method is used, get the current page number directly from el $ {pageIndex}, and then-1 // var a = $ (obj ). parent (). children ("pageItemActive" pai.html ();/ /If the current page is 1, no-, the address is the same as the home page if (pageIndex <= 1) {action = url;} else {action = url + "? PageIndex = "+ (pageIndex-1);} else if (" next page "= text) {// if the current page is the last page, the next page is the last page, the url is the same as the current url. if (pageIndex = talPage) {action = url;} else {action = url + "? PageIndex = "+ (pageIndex + 1) ;}} else if (" last page "= text) {// if the current page is the last page, the url remains unchanged. if (pageIndex = talPage) {action = url;} else {action = url + "? PageIndex = "+ talPage; }} else {// when the page number is clicked, action = url + "? PageIndex = "+ text;} submit ();}}

Page elements:

<ul id="getPage" class="page" style="list-style-type:none;"></ul>

The css style used:

<Style type = "text/css"> <! -- Pagination style -->. page {list-style: none ;}. page> li {float: left; padding: 5px 10px; cursor: pointer ;}. page. pageItem {border: solid thin # dddddddd; margin: 5px ;}. page. pageItemActive {border: solid thin # 0099FF; margin: 5px; background-color: # 0099FF; color: white ;}. page. pageItem: hover {border: solid thin # 0099FF; background-color: # 0099FF; color: white ;}. page. pageItemDisable {border: solid thin # DDDDDD; margin: 5px; background-color: # dddddddd ;}</style>

Processing in java:

// Obtain the current page String pageIndex = "1"; // The default is the first page if (null! = Request. getParameter ("pageIndex ")&&! "". Equals (request. getParameter ("pageIndex") {pageIndex = (String) request. getParameter ("pageIndex");} // Finally, you must return the current page to the foreground for style display request. setAttribute ("pageIndex", pageIndex); // a calculation ...., get startNum, endNum String startNum = Integer. toString (Integer. parseInt (pageIndex)-1) * 10) + 1); String endNum = Integer. toString (Integer. parseInt (startNum) + 9); // query the List <Service> serviceList = serviceServiceImpl according to the conditions. findAll (service, startNum, endNum); // query the total number, used for pagination Integer serviceCount = serviceServiceImpl. getServiceCount (service); request. setAttribute ("count", serviceCount); // total Integer countPage = serviceCount/10; if (serviceCount/10.0-serviceCount/10)> 0) {// There are decimal places, total number of pages + 1 countPage = countPage + 1;} request. setAttribute ("countPage", countPage); // the total number of pages.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.