When it comes to the Ajax paging plug-in based on jquery, let's look at the main code structure first:
1, first define a pager object:
var Sjpager = Window.sjpager = {opts: {//default properties Pagesize:10, pretext: "Pre", Nexttext: "Next", Firsttex T: "A", Lasttext: "Last", Shiftingleft:3, Shiftingright:3, Preleast:2, Nextleast:2, showfirst:t Rue, Showlast:true, url: "", type: "POST", DataType: "JSON", Searchparam: {}, Beforesend:null, SUCC Ess:null, Complete:null, Error:function () {alert ("Sorry, request error, please request again!")
");
}, pagerelement:null,//paging DOM element Commonhtmltext: {//Common text variable}, init:function (obj, op) {//object initialization}, Dopage:function (index, pageSize, Searchparam) {//execute pagination Method}, Gettotalpage:function () {//Get total number of pages}, create Preandfirstbtn:function (Pagetextarr) {//Create previous page, homepage button link}, Createnextandlastbtn:function (Pagetextarr) {//Create Next page, last button link}, Createindexbtn:function (Pagetextarr) {//Middle Pagination index button link}, Renderhtml:function (Pagetextarr) {//
Render paging control to page}, createspan:function (text, className) { Create span}, Createindextext:function (index, text) {//create indexed text}, Jumptopage:function () {//Jump to}}
The object contains the attributes of pagination and the methods used, Dopage () is the core method of paging.
2. Make jquery expansion
$.fn.sjajaxpager = function (option) {return
Sjpager.init ($ (this), option);
3, plug-in use
<body> <table id= "dataTable" border= "1px" ></table> <div id= "Pager" ></div> </body>
$ (function () {
$ (' #pager '). Sjajaxpager ({
URL: "Handler1.ashx",
pagesize:10,
searchparam: {/
*
* If there are other query conditions, directly in here can be
* * *
id:1,
name: ' Test ',
},
beforesend:function () {
},
Success:function (data) {
/
* * * Returns the information processed according to its own needs
* *
var tablestr = "<tr><td>id</td ><td> name </td><td> age </td></tr> ";
$.each (Data.items, function (i,v) {
tablestr = "<tr><td>" + v.id + "</td><td>" + v.name + "&L T;/td><td> "+ v.age + </td></tr>";
};
$ (' #dataTable '). HTML (TABLESTR);
},
complete:function () {
}
});
Do you find that the usage is basically the same as using Ajax directly?
Finally we can see the effect: (table style is not set more ugly, pagination style can also modify the CSS file as needed)
F12 Open the Debugging tool, click on the paging to view the requests and responses sent:
PageIndex and pagesize are the default parameters for Plug-ins and can be retrieved directly from the request in the background. In particular, it is necessary to note that the plug-in response is also required to follow a specific format {"Total": 0, "items": []}, as shown in the figure above represents the number of data records, items represent the data for pagination.
Here only the general structure of the Code and the effect of rendering, we may wish to do their own first to achieve.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
