JQuery Pagination Ajax paging plug-in (no refreshing or delay during paging switching)

Original Project address: http://plugins.jquery.com/project/pagination
Version: v1.2
Source File Download: English original version or Chinese translation modified version

I. Related demo

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

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.

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.

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

5. Examples

For example, the following code is used:
Copy codeThe Code is as follows:
$ ("# 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. 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!

If you find that the content in the article is inaccurate or that you need to communicate with others, you can comment on it or go here to ask questions.
(This article is complete)