Pagination jquery Ajax page reference

http://www.zhangxinxu.com/wordpress/2010/01/jquery-pagination-ajax%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6%E4%B8% ad%e6%96%87%e8%af%a6%e8%a7%a3/

Personal blog Reference

Chinese Project Address: http://www.zhangxinxu.com/jq/pagination_zh/original Project Address: Http://plugins.jquery.com/project/pagination version: v1.2 source File Download: English original or Chinese translation modified version

This address: http://www.zhangxinxu.com/wordpress/?p=616

The author of this article is: Zhang Xin Xu from: Zhang Xin Xu-Xin space-Xin Life Welcome to visit the original source

First, the relevant demo

• Basic Demo Page
• Ajax Demo Page
• Parameters to edit the demo page

This address: http://www.zhangxinxu.com/wordpress/?p=616

The author of this article is: Zhang Xin Xu from: Zhang Xin Xu-Xin space-Xin Life Welcome to visit the original source

Ii. Introduction and description

• This jquery plug-in for the AJAX page plug-in, one-time load, so the paging switch without refresh and delay, if the volume of large data is not recommended for this method, because loading will be slow.
• The original plugin CSS is not very reasonable, using floating, it is not easy to achieve the orientation of the left and right direction, and did not clear the floating, in the Chinese revision I have optimized it, so that it supports text-align positioning.
• The original JS file comments in Chinese translation, the demo page is also Chinese, the demo page JS and the original demo have some discrepancies, but the core unchanged.

This address: http://www.zhangxinxu.com/wordpress/?p=616

The author of this article is: Zhang Xin Xu from: Zhang Xin Xu-Xin space-Xin Life Welcome to visit the original source

Iii. Methods of Use

As with the general jquery plugin, this plugin is also very simple and easy to use. The method is pagination , for example $("#page").pagination(100); , where the 100 parameter is required, indicating the total number of items displayed, which is the simplest to use, and the resulting display is as follows:

It is also worth mentioning that the page list needs to be placed in the class pagination tag, and you can use the Text-align property to control whether the pagination is centered or right.

Callback functions are generally used to load the contents of the corresponding paging display, see the demo source file.

This address: http://www.zhangxinxu.com/wordpress/?p=616

The author of this article is: Zhang Xin Xu from: Zhang Xin Xu-Xin space-Xin Life Welcome to visit the original source

Iv. parameters

Name of parameter	Description	parameter Values
MaxEntries	Total number of entries	Required parameter, Integer
Items_per_page	The number of entries displayed per page	Optional parameter, default is 10
Num_display_entries	Number of page entries displayed in the main part of the continuous paging	Optional parameter, default is 10
Current_page	The currently selected page	Optional parameter, default is 0, indicates 1th page
Num_edge_entries	Number of entries for the end-to-end page displayed on both sides	Optional parameter, default is 0
Link_to	Links to Pagination	String, optional parameter, default is "#"
Prev_text	Text displayed on the previous Page page-out button	String parameter, optional, default is "Prev"
Next_text	Text that appears on the next page of the paging button	String parameter, optional, default is "Next"
Ellipse_text	What text does the omitted number of pages indicate	Optional string parameter, default is "..."
Prev_show_always	Whether to display the previous page paging button	Boolean, optional parameter, default true, which displays the previous page button
Next_show_always	Whether to display the next page paging button	Boolean, optional parameter, true by default, displays the next page button
Callback	callback function	Default no execution effect

This address: http://www.zhangxinxu.com/wordpress/?p=616

The author of this article is: Zhang Xin Xu from: Zhang Xin Xu-Xin space-Xin Life Welcome to visit the original source

V. Examples of Use

For example, the following code is used:

$ ("#Pagination"). Pagination (    num_edge_entries:2,    num_display_entries:4,    callback: Pageselectcallback,    items_per_page:1});

The meaning of this code is: a total of four (maxentries) list items, the end of both sides of the page display 2 (num_edge_entries), the number of consecutive paging body Display 4 (num_display_entries), The callback function is Pageselectcallback (callback), and the list item shown on each page is 1 (items_per_page). You can modify the parameters of this configuration against the parameter table.

This address: http://www.zhangxinxu.com/wordpress/?p=616

The author of this article is: Zhang Xin Xu from: Zhang Xin-Xin space-Xin life Welcome to visit

Vi. Some instructions on the demo

A total of three demo, the first demo is a static data, directly written on the HTML; the second one uses AJAX to load the HTML data and then page out, and the third demo can dynamically modify some parameters to observe the corresponding paging effect.

All the JS comments on the demo page I have changed to the Chinese annotation, the difficulty is the callback function, the demo callback function has two parameters, one is Page_index, the other is JQ, the previous one represents the page index value of the paging that you are currently clicking, the next parameter represents the loading container. The page index value here is the key, we have to find the corresponding (for example) HTML element according to this index value, and then display it in the specified container, the demo provides the method of loading single element and multi-element, I believe there is not too much problem.

All right, that's all!

If you find that the article is inaccurate or has a related problem, you can talk about it by commenting or by going here. Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com] This address: http://www.zhangxinxu.com/wordpress/?p=616

Pagination jquery Ajax page reference