Jquery + Ajax asynchronous Paging

$ (OBJ ). ajaxpage (setting); is a method for extending jquery, called asynchronous paging. You can set several parameters to quickly achieve paging effect with backend processing and customize the output. Usage:

1. Reference The ajaxpage CSS file. (This file is a page display style that can be merged into your style );

2. Reference The jquery class library. jquery 1.8.3 is recommended;

3. Reference The ajaxpage. js file;

4, $ (OBJ). ajaxpage (setting); // obj is the output container of the paging content, which is the jquery selector. ID is recommended. setting is the configured parameter;

Seting
Parameters	Type	Description
URL	String	Required ParameterThe variable {page} can be used to represent the current page; For example,/index. asp? Page = {page} & type = XL,/index_?page=.html,/index. php? Page = {page} & pagesize = {paesize}, etc.
Pageid	Jquery object	Required ParameterIs the container output by page; For example, pageid: $ ("# page ");
Content	String | Function	Required ParameterFor the content output format, which is determined by the data returned from the backend; String type: Content: "<ul> [data] Title: {Title} [/data] </ul>"; // data indicates the name returned by the backend, for details, see backend processing below; Function Type: Content: function () {return "<ul> [data] Title: {Title} [/data] </ul> "}, you can use this to call the configured parameters; For example, content: function () {return this. Page * 1 <12? '<Ul> [data] <li> title: {Title}, time: {time}, click: {hit} </LI> [/data] </ul> ': "greater ";}
Pagesize	Number	The number of data entries per page. If this parameter is set, {pagesize} can be replaced in the URL. The default value is 10;
Page	Number	Currently loaded page. The default value is 1;
Beforesend	Function	Call data before request; for example, load prompt; for example, beforesend: function () {$ ("# loading"). fadein ()};
Complete	Function	Call after the request is completed; you can close the loading prompt;
Nodata	String	If no data exists, it is displayed in the content output container. The default value is: not found;
Run	Boolean	Whether to start paging. The default value is no; For example, run: True, the program will immediately execute pagination;
External exposure method
Run ()	Run the paging program and load it as needed; For example: VaR A = $ ("# XL"). ajaxpage (setting); // required parameters are configured in setting; SetTimeout (function (){ A. Run (); },2000 ); Note: The setting. Page loaded after run () is run by default; setting. Run is the same as run;
Get (I );	Loading and other pages; There are "first" first page, "last" last page, "Next" next page, "pre" Previous Page optional, otherwise you can give numbers such: : VaR A = $ ("# XL"). ajaxpage (setting); // required parameters are configured in setting; SetTimeout (function (){ A. Get ("last"); // jump to the last page; },2000 ); For optimization, the request will be ignored directly when no current request is requested; for example: A. Get (1). Get (2). Get (3); // ignore them directly after 1 is successful; Note: Before using get (), make sure you have run it; The current page is invalid;
Backend Processing
Receiving Parameters	The front-end will send requests to the backend in the format of setting. url. (currently, only get is supported.) For example: I. php? Page = 1 & pagesize = 10. After receiving the message from the backend, process the program and return it to the front end. (pagesize is not supported, and the frontend and backend can be written to the dead end) Note: Do not trust the parameter passing at the front end. For security reasons, consider it or escape it;
Return Value	{"Code": 0} returned when no data exists {"Code": 1, "pagecount": 16, "recordcount": 156, "data": [{"title": "Xie Liang", "Time": 20120505 }, {"title": "you", "Time": 55555}]} // Code: 1 indicates the response code, paegcount indicates the total number of pages, and recordcount indicates the total number of data records; Data is a circular array, which is directly passed through setting. content is displayed in the content container after consideration. data can be defined by yourself. This name corresponds directly to content: "[data] [/data, the loop in data is a {} object, and the key name in it directly corresponds to the {} variable in [data] in content; Here Thanks dmimi: http://dmimi.sentsin.com/
Example
Minimize	$ ("# XL"). ajaxpage ({ URL: "Page. php? Get = XL & page = {page} ", // the backend also makes pagesize = 10 a fixed value. Pageid: $ ("# page "), Run: True, Content: '<ul> [data] <li> title: {Title}, time: {time}, click: {hit} </LI> [/data] </ul>' });
Loading prompt	$ ("# XL"). ajaxpage ({ URL: "Page. php? Get = XL & page = {page }", Pageid: $ ("# page "), Run: True, Content: function (){ Return '<ul> [data] <li> title: {Title}, time: {time}, click: {hit} </LI> [/data] </ul> '; }, Beforesend: function (){ $ ("# Loading"). fadein (); }, Complete: function (){ $ ("# Loading"). Stop (). fadeout (); } });
The first 10 pages are in HTML format, followed by HTML format.	$ ("# XL"). ajaxpage ({ URL: "Page. php? Get = XL & page = {page} & pagesize = {pagesize }", Pageid: $ ("# page "), // Run: True, Content: function (){ Return this. Page * 1> = 10? '<Ul> [data] <li> title: {Title}, time: {time}, click: {hit} </LI> [/data] </ul> ': "The Last 10 pages of [data] {Title} [/data]"; } });
Load as needed	VaR A = $ ("# XL"). ajaxpage ({ URL: "Page. php? Get = XL & page = {page }", Pageid: $ ("# page "), Content: '<ul> [data] <li> title: {Title}, time: {time}, click: {hit} </LI> [/data] </ul>' }); $ (Window). Scroll (function (){ /// Cache the code A. Run (); });
Load the last page after Ms	VaR A = $ ("# XL"). ajaxpage ({ URL: "Page. php? Get = XL & page = {page }", Pageid: $ ("# page "), Run: True, Content: '<ul> [data] <li> title: {Title}, time: {time}, click: {hit} </LI> [/data] </ul>' }); SetTimeout (function (){ A. Get ("last ");// },4000 );
Advantages and disadvantages
Advantages: the code is lightweight and scalable. A page can be used multiple times. Common comments and lists can be made with some settings; Disadvantages: currently, only get is supported, and jsonp and post are not supported; If you find a bug, please report it to 463004799-> Xie Liang;

Demo address: http://www.xuexb.com/demo/page/page.html

JS source code download: http://www.xuexb.com/demo/page/page.js