Use ajax pagination in jQuery to implement code, jqueryajax

Use ajax pagination in jQuery to implement code, jqueryajax

The examples in this article illustrate how to use ajax paging code in jQuery and share it with you for your reference. The specific content is as follows:

Encapsulate pagination into a jsp, so you can introduce pagination pages by using the include method. The name is page_ajax.jsp.
After encapsulation, the user needs to introduce page_ajax.jsp to the page, and when querying the list, click the button to call a custom method, such as myFunction (). In this method, call the self-expanded jquer method, $. pageAjax (url, functionName, showDIv );
The url here is the ajax url You Want To request. functionName is the method for dynamically assigning values to the tbody after processing the callback data. showDIv is your hidden div.
That is, write the following code:

function pageAjax(){     var url="${ctx}/system/conProductInfo/listOfAjax.action";     $.pageAjax(url,"productMessageDiv","showList");   } 

ProductMessageDiv: the previously hidden div is as follows:

<Div style = "display: none;"> <div id = "productMessageDiv" class = "showParentDiv" style = "width: 950px; height: 400px "> <div id =" showProductListMsg "> <div class =" grayBg "> <div id =" toolbarScroll "> <span> <input type =" button "value =" OK "onclick =" submitProductMessage (); "/> <input type =" button "value =" cancel "onclick =" closeProduct (); "/> <input type =" button "value =" query "onclick =" selectProduct (); "/> <input id =" value "name =" value "type =" text "class =" width_132 "/> <select id =" key "name =" key "class = "width_115"> </select> </span> </div> <div class = "page" id = "page"> <jsp: include page = "/portal/common/page/page_ajax.jsp"/> </div> <div class = "clearFloat"> </div> <div class =" scrollInfo "> <div class =" tableInfo "style =" overflow-y: scroll; height: 365px; "> <table id =" dragTable "border =" 0 "cellpadding =" 0 "cellspacing =" 0 "id =" listTable "> <thead> <tr> <td width = "4%"> <input type = "checkbox" id = "selectallCheckBox" onclick = "selectListall (); "/> </td> <td width =" % "> product code </td> <td width =" % "> product name </td> <td width =" % "> Product Model </td> <td width =" % "> product brand </td> <td width =" % "> product category </td> <td width = "%"> supplier </td> <td width = "%"> product specifications </td> </tr> </thead> <tbody id = "msgContent"> </tbody> </table> </div>

ShowList: This is the method for calling the callback data:

Function showList (data) {var list = data. list; var str; if (list = "" | list = null) {str = "<tr> <td colspan = \" 9 \ "> <span class = \" tip \ "> the system has no records! </Span> </td> </tr> ";}else {for (var I = 0; I <list. length; I ++) {str = str + "<tr id = \" contentTr "+ I +" \ "> <td> <input name = \" selectIds \ "type = \" checkbox \" value = \ "" + list [I]. id + "\"/> </td> <td> "+ list [I]. productCode + "</td> <td>" + list [I]. productName + "</td> <td>" + list [I]. productType + "</td> <td>" + list [I]. brandName + "</td> <td>" + list [I]. typeName + "</td> <td>" + list [I]. companyShortname + "</td> <td>" + list [I]. productCode + "</td> </tr>" ;}} if ($ ('# key '). val () = "" | $ ('# key '). val () = null) $ ('# key '). append ("<option value = 'productname '> product name </option> <option value = 'productcode'> product no. </option> "); $ ("# msgContent "). empty (); $ ("# msgContent "). append (str );}

Complex things are in page_ajax.jsp.

Var ajaxUrl; var showDivName; var ajaxFunctionName; jQuery. extend ({pageAjax: function (url, div, functionName) {ajaxUrl = url; showDivName = div; ajaxFunctionName = functionName; $. ajax ({url: url, data: {"pageRequest. page ": $ ('# pagepage '). val (), "pageRequest. rows ": $ ('# pageRows '). val ()}, dataType: "json", success: function (data) {eval (functionName + "(data)"); $. changePageAjax (data); showWin (div) ;}}) ;}, pageA JaxOfParam: function (url, div, functionName, key, value) {$. ajax ({url: url, data: {"pageRequest. page ": $ ('# pagepage '). val (), "pageRequest. rows ": $ ('# pageRows '). val (), "key": key, "value": value}, dataType: "json", success: function (data) {eval (functionName + "(data) "); $. changePageAjax (data); showWin (div) ;}}) ;}, changePageAjax: function (data) {var totalCount = data. totalCount; changeDefaultRows (data); var PageCount = totalCount % parseInt ($ ("# pageRows"). val () = 0? ParseInt (totalCount/parseInt ($ ("# pageRows "). val (): parseInt (totalCount/parseInt ($ ("# pageRows "). val () + 1; $ ("# totalPage" ).html (pageCount + ''); $ (" # totalCount ").html (totalCount + ''); changeButton (pageCount) ;}}); function changePage (pageTitle) {if (pageTitle = "previous") {$ ('# pagepage '). val (parseInt ($ ('# pagepage '). val ()-1);} else if (pageTitle = "next") {$ ('# pagePage '). val (parseInt ($ ('# pagePa Ge '). val () + 1);} else if (pageTitle = "first") {$ ('# pagePage '). val (1);} else if (pageTitle = "last") {var totalCount = parseint('{totalcount'{.html (); $ ('# pagepage '). val (parseInt (totalCount-1)/parseInt ($ ('# pageRows '). val () + '') + 1);} go ();} function goToPointedPage () {var pointedPageNum = $ ('# forwardPageNum '). val (); var patrn =/^ \ +? [1-9] [0-9] * $/; if (! Patrn.exe c (pointedPageNum) {alert ('enter a positive integer in the number of pages '); return;} if (parseInt (pointedPageNum)> parseint({('{totalpage'{.html ())) {alert ('the maximum number of pages allowed to be entered '); return ;}$ (' # pagepage '). val (parseInt (pointedPageNum); go ();} function changeButton (pageCount) {$ ('# forwardPageNum '). val ($ ('# pagepage '). val (); if (pageCount = 1) {$ ("# beforePage "). attr ("disabled", "disabled"); $ ("# firstPage "). attr ("disabled", "disabled"); $ ("# nextPage "). attr ("disabled", "disabled"); $ ("# lastPage "). attr ("disabled", "disabled");} else if ($ ("# forwardPageNum "). val () <pageCount) {// if the number of pages is smaller than the total number of pages, the next and last pages can use $ ("# nextPage "). removeAttr ("disabled"); $ ("# lastPage "). removeAttr ("disabled"); if ($ ("# forwardPageNum "). val ()> 1) {// if the number of pages is greater than 1, it means 1 <total number of pages <all available $ ("# firstPage "). removeAttr ("disabled"); $ ("# beforePage "). removeAttr ("disabled");} else {// when the number of pages is smaller than the total number of pages, only one is equal to 1 $ ("# firstPage "). attr ("disabled", "disabled"); // when the value is 1, the home page and previous page are unavailable $ ("# beforePage "). attr ("disabled", "disabled") ;}} else {$ ("# beforePage "). removeAttr ("disabled"); $ ("# firstPage "). removeAttr ("disabled"); $ ("# nextPage "). attr ("disabled", "disabled"); $ ("# lastPage "). attr ("disabled", "disabled") ;}} function changeDefaultRows (data) {if ($ ("# pageRows "). val () = null | $ ("# pageRows "). val () = "") {$ ("# pageRows "). empty (); $ ("# pageRows "). append ("<option value = '" + data. pAGESIZES [0] + "'> default number of entries </option> <option value ='" + data. pAGESIZES [1] + "'>" + data. pAGESIZES [1] + "</option> <option value = '" + data. pAGESIZES [2] + "'>" + data. pAGESIZES [2] + "</option>") ;}} function changeRows () {$ ('# pagepage '). val (1); go ();} function go () {$. pageAjax (ajaxUrl, showDivName, ajaxFunctionName);} function clearPageInfo () {$ ("# pagePage "). val ('1');} $ (function () {$ ("body "). keydown (function (event) {if (event. keyCode = 13) {goToPointedPage () ;}}) ;}); </script> <div class = "toolbarScroll"> <s: hidden name = "pageRequest. page "id =" pagePage "/> <input id =" firstPage "value =" Homepage "type =" button "onclick =" changePage ('first ') "/> <input id =" beforePage "value =" previous Page "type =" button "onclick =" changePage ('previous ') "/> <input size =" 6 "maxlength =" 3 "id =" forwardPageNum "class =" formStylePage "onblur =" goToPointedPage () "value =" "type =" text "style =" text-align: center; "/>/<span class =" currentPage "id =" totalPage "> </span> <input id =" nextPage "value =" next page "type =" button "onclick = ""changePage ('Next ') "/> <input id =" lastPage "value =" last "type =" button "onclick =" changePage ('lala ') "/> <span id =" totalCount "> </span> <select id =" pageRows "name =" pageRequest. rows "onchange =" changeRows () "> </select> </span> </div>

You need to understand that the ajax request is to refresh your specific department. I encountered a problem in the beginning. In fact, when paging is performed, the value is transferred to the background, but the number of displays on the current page and each page is not displayed. The buttons on the page are separated from the list below and do not need to be contacted, this simplifies the problem. Time is limited, so you can read the code carefully.

The above is all the content of this article, and I hope it will help you learn jquery programming.

Articles you may be interested in:

• JS + Ajax + Jquery implement the implementation of refreshing pages and grouping
• Use ajax pagination in jQuery to implement code
• Code for efficient paging Based on Jquery + Ajax + Json
• Sharing carefully selected 12 excellent jQuery Ajax paging plug-ins and tutorials
• JQuery Pagination Ajax paging plug-in (no refreshing or delay during paging switching)
• Implementation of pagination using PHP + JQuery + Ajax
• Example code of JQuery + Ajax without refreshing pagination
• Use Jquery + Ajax + Json in asp.net to implement instance code without refreshing pages
• Display by Page Based on Jquery + Ajax + Json
• JQuery + Ajax + PHP + Mysql: display data by PAGE