Jquery pagination Ajax paging plug-in

ArticleDirectory

• I. Related demo
• II. Introduction and description
• Iii. Usage
• Iv. Parameters
• 5. Examples
• Vi. Demo description

Jquery pagination Ajax paging plug-in

From http://www.zhangxinxu.com by zhangxinxu
Address: http://www.zhangxinxu.com/wordpress? P = 616

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 version or Chinese translation modified version
Translation: Zhang xinxu

Address: http://www.zhangxinxu.com/wordpress? P = 616

The author of this article is: Zhang xinxu from: Zhang xinxu-xin space-xin Sheng live welcome to visit the original source

I. Related demo

• Basic demo page
• Ajax demo page
• Parameter editable demo page

Address: http://www.zhangxinxu.com/wordpress? P = 616

The author of this article is: Zhang xinxu from: Zhang xinxu-xin space-xin Sheng live welcome to visit the original source

II. Introduction and description

• This jquery plug-in is an Ajax paging plug-in that can be loaded at a time. Therefore, there is no need for refreshing and delay during paging switching. If the data volume is large, this method is not recommended because loading is slow.
• The CSS of the original plug-in is not reasonable and float is used, so it is difficult to locate the left and right directions and the float is not cleared. I optimized it in the modified Chinese version, to support text-align positioning.
• The original JS file annotation is translated in Chinese, and the demo page is also in Chinese. The JS of the demo page differs from the original demo, but the core remains unchanged.

Address: http://www.zhangxinxu.com/wordpress? P = 616

The author of this article is: Zhang xinxu from: Zhang xinxu-xin space-xin Sheng live welcome to visit the original source

Iii. Usage

Like the jquery plug-in, this plug-in is easy to use. The method isPaginationFor example$ ("# Page"). pagination (100 );The 100 parameter is required, indicating the total number of projects. This is the simplest use and the result is as follows:

It is also worth mentioning that the pagination list should be placed in the class pagination label. You can use the text-align attribute to control whether the pagination display is centered or right.

The callback function is generally used to load the content displayed on the corresponding page. For details, see the demo source file.

Address: http://www.zhangxinxu.com/wordpress? P = 616

The author of this article is: Zhang xinxu from: Zhang xinxu-xin space-xin Sheng live welcome to visit the original source

Iv. Parameters

Parameter Name	Description	Parameter Value
Maxentries	Total number of entries	Required parameter, integer
Items_per_page	Number of entries per page	Optional. The default value is 10.
Num_display_entries	Number of entries displayed in the continuous pagination body	Optional. The default value is 10.
Current_page	Currently selected page	Optional parameter. The default value is 0, indicating page 1st.
Num_edge_entries	Number of entries on both sides of the page	Optional. The default value is 0.
Link_to	Paging Link	String, an optional parameter. The default value is "#"
Prev_text	Text displayed on the "Previous Page" button	String parameter. Optional. The default value is "Prev"
Next_text	Text displayed on the next page button	String parameter. Optional. The default value is "Next"
Ellipse_text	What text is used to represent the number of omitted pages?	Optional string parameter. The default value is "... "
Prev_show_always	Whether to display the "Previous Page" button	Boolean, optional parameter. The default value is true, indicating that the "Previous Page" button is displayed.
Next_show_always	Whether the "next page" button is displayed	Boolean, optional parameter. The default value is true, indicating that the "next page" button is displayed.
Callback	Callback Function	No execution result by default

Address: http://www.zhangxinxu.com/wordpress? P = 616

The author of this article is: Zhang xinxu from: Zhang xinxu-xin space-xin Sheng live welcome to visit the original source

5. Examples

For exampleCode:

 
$ ("# Pagination"). pagination (56, {num_edge_entries: 2, num_display_entries: 4, callback: pageselectcallback, items_per_page: 1 });
 

This Code indicates that there are a total of 56 (maxentries) list items, 2 (num_edge_entries) are displayed on the first and end sides of the page, and 4 (num_display_entries) are displayed on the number of consecutive pages, the callback function is pageselectcallback (callback). The list item displayed on each page is 1 (items_per_page ). You can modify the parameters here according to the parameter table.

Address: http://www.zhangxinxu.com/wordpress? P = 616

The author of this article is: Zhang xinxu from: Zhang xinxu-xin space-xin Sheng live welcome to visit

Vi. Demo description

There are three demos in total. The first demo is static data, which is directly written in HTML; the second is to load HTML data using Ajax and display it by page; the third demo can dynamically modify some parameters to observe the corresponding paging effect.

I changed the JS Annotations on all Demo pages to Chinese annotations. The difficulty lies in the callback function. In the demo, the callback function has two parameters: page_index and JQ, the previous parameter indicates the index value of the number of pages on which you click to load the container. The page index value here is the key. We need to find the corresponding HTML Element Based on the index value, and then display it in the specified container, the demo provides a method for loading single elements and multiple elements. I believe there will be no major problems.

Okay, that's all!