When developing, we often encounter pagination troubles, especially for a back-end programmer, but this problem cannot be solved, so we found a pagination control and recorded it for future use.
Here are simple examples used on the official website:
//The following will demonstrate an asynchronous page $.getJSON('test/demo1.json', {curr: 6}, function(res){ //Request from page 6. The returned json format can arbitrarily define layout({ cont: 'page1', //Container. The value supports id name, native dom object, and jquery object. [If the container is]: <div id="page1"></div> pages: res.pages, //Total number of pages obtained through the background curr: 6, //Initialize the current page jump: function(e){ //Calling the callback after triggering the page $.getJSON('test/demo1.json', {curr: e.curr}, function(res){ e.pages = e.last = res.pages; //Retrieve the total number of pages, generally you don't need to write //Render var view = document.getElementById('view1'); //You can also use jquery var demoContent directly = (new Date().getTime()/Math.random()/1000)|0; //This is just for demonstration view.innerHTML = res.content + demoContent; }); } }); }); }); });A basic pagination effect will come out.
If you need other more gorgeous effects, please modify the source code.
Let’s talk about it first, if the effect of a pagination is presented.
First of all, refer to the control layout.js
<script type="text/javascript" src="/lib/laypage/laypage.js"></script>
Plugin download address:
Now let’s take a look at the plugin configuration:
function SearchJoinMemberInfoPage() { var ccId = parseInt($("#hid_ccid").val(), 10); var saveKey = $("#targetKey").val(); var pageSize = 10; //The following will use jquery.ajax as an example to demonstrate an asynchronous page $.getJSON('/Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById', { type: 2, ccId: ccId, pageIndex: 1, pageSize: pageSize, saveKey: saveKey }, function (res) { //Request starting from page 1. The returned json format can arbitrarily define layout({ cont: 'page1', //Container. The value supports id name, native dom object, and jquery object. [If the container is]: <div id="page1"></div> pages: res.pageCount, //Total number of pages obtained through the background curr: 1, //Initialize the current page skin: '#429842',//Skin color groups: 3, //Skip number of pages continuously display skip: true, //Whether to open page jump first: 'Homepage', //If not displayed, set false last: 'Last page', //If not displayed, set false //Prev: '<', //If not displayed, set false //next: '>', //If not displayed, set false jump: function (e) { //The callback after triggering the paging is $.getJSON('/Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById', { type: 2, ccId: ccId, pageIndex: e.curr,//The current page pageSize: pageSize, saveKey: saveKey }, function (res) { e.pages = e.last = res.pageCount; //Retrieve the total number of pages, generally no need to write //Render var view = document.getElementById('userTable'); //You can also use jquery directly // parse data var resultHtml = PackagData(res); view.innerHTML = resultHtml; }); } }); }/Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById displays an asynchronous address that returns the data to be displayed and the number of pages. type:
2,ccId: ccId,pageIndex: 1,pageSize: pageSize, saveKey: saveKey is the parameters that need to be used in asynchronous.
PackagData(res); This function parses the returned data and renders it.
The userTable is the dom node used to display the returned data, and page1 is the dom node used to display the button for the number of pages.
Now see the effect:
It's actually very simple, and this completes a pagination display.
Thank you for your reading, and I hope you will continue to pay attention to more exciting content from Wulin.com.