Recommended reading: jquery Plugin Development Boutique Tutorial Let your jquery ascend a step
Now that we've come to the Ajax paging plugin based on jquery, let's take a look at the main code structure: (I think the graceful description and introduction to our programmers
It's not as if the code came true. ）
1, first define a pager object:
var Sjpager = Window.sjpager = {opts: {//default property PageSize:, Pretext: "Pre", Nexttext: "Next", Firs Ttext: "A", Lasttext: "Last", Shiftingleft:, Shiftingright:, Preleast:, Nextleast:, Showfirst:true, Showlast:tru E, url: "", type: "POST", DataType: "JSON", Searchparam: {}, Beforesend:null, Success:null, Complete:null, error:funct Ion () {alert ("Sorry, request error, please request again!") ");"}, pagerelement:null,//paging DOM element Commonhtmltext: {//Common text variable}, init:function (obj, op) {//Object initialization}, Dopage:functio N (index, pageSize, Searchparam) {//Execute paging method}, Gettotalpage:function () {//Get total pages}, createpreandfirstbtn:function (page Textarr) {///Create previous page, homepage button link}, Createnextandlastbtn:function (Pagetextarr) {//Create next page, last button link}, Createindexbtn:function (PA
Getextarr) {//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= "px" ></table>
<div id= "Pager" ></div>
</body>
$ (function () {
$ (' #pager '). Sjajaxpager ({
URL: "Handler.ashx",
pageSize:,
Searchparam: {
* * * * If there are other query conditions, directly in here
can * * *
ID:,
Name: ' Test ',
},
beforesend: function () {
},
success:function (data) {/*
* * Returns the information that is 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's a look at an example of a jquery Ajax paging plugin
The 1.0 version of the refactoring, eliminating some of the cost of the function, optimize the page style, existing features:
1, a one-time loading of data into the page memory, page paging.
2, using jquery ajax to fetch data paging from the server each time.
3), support custom pagination style, plug-in default implementation of two styles to choose from.
<table id= "Table2" > <thead> <tr><th width= "200px" > website name </th> <th Width= "100px" > URL </th> <th width= "100px" > Visibility </th> <th width= "120px" > Traffic </th > </tr> </thead> <tbody></tbody> </table>
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
