Home > Developer > JavaScript
Simple implementation of jquery ajax paging plug-in and jqueryajax paging plug-in
Speaking of jQuery-based ajax paging plug-ins, Let's first look at the main code structure:
1. First define a pager object:
Var sjPager = window. sjPager = {opts: {// default attribute pageSize: 10, preText: "pre", nextText: "next", firstText: "First", lastText: "Last", shiftingLeft: 3, shiftingRight: 3, preLeast: 2, nextLeast: 2, showFirst: true, showLast: true, url: "", type: "POST", dataType: "JSON ", searchParam :{}, beforeSend: null, success: null, complete: null, error: function () {alert ("sorry, request error. Please try again! ") ;},}, PagerElement: null, // page dom element commonHtmlText: {// public text variable}, init: function (obj, op) {// object initialization}, doPage: function (index, pageSize, searchParam) {// execution paging method}, getTotalPage: function () {// retrieve the total number of pages}, createPreAndFirstBtn: function (pageTextArr) {// create previous page and homepage button link}, createNextAndLastBtn: function (pageTextArr) {// create next page and last page button link}, createIndexBtn: function (pageTextArr) {// link to the center paging Index button}, renderHtml: function (pageTextArr) {// render the paging control to the page}, createSpan: function (text, className) {// create span}, createIndexText: function (index, text) {// create index text}, jumpToPage: function () {// jump }}
The object contains the paging attributes and the methods used. doPage () is the core paging method.
2. jQuery Extension
$.fn.sjAjaxPager = function (option) { return sjPager.init($(this), option); };
3. Plug-ins
<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, you can directly input them here */id: 1, name: 'test',}, beforeSend: function () {}, success: function (data) {/** the returned data is processed as needed */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 + "</td> <td>" + v. age + "</td> </tr>" ;}); Parameters ('your datatable'your .html (tableStr) ;}, complete: function (){}});})
Have you found that the method of using ajax is basically the same as that of using ajax directly?
Finally, we can see the effect: (The table style is not set ugly, you can also modify the css file as needed)
F12 open the debugging tool and click the page to view the sent request and response:
PageIndex and pageSize are default parameters of the plug-in. They can be obtained directly in the Request in the background. Note that the response of the plug-in also follows the specific format {"total": 0, "items": []}. As shown in, total indicates the total number of data records, items indicates paging data.
Here, only the general structure of the Code and the effect of the Code are displayed. You may wish to implement it first.
Articles you may be interested in: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
