JQuery Pagination Ajax Paging plugin (no refresh and delay on paging) Chinese translation version _jquery

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

first, related demo

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

ii. Introduction and Description

• This jquery plug-in for Ajax paging Plug-ins, one-time load, so paging when there is no refresh and delay, if the large amount of data is not recommended this method, because the load will be slower.
• The original plugin CSS is not reasonable, the use of floating, it is not convenient to achieve the orientation of the left and right, and did not clear the float, in the Chinese version of the revision I have optimized it to support the positioning of the text-align.
• The original JS file annotation for the Chinese Translation, demo page is also Chinese, the demo page JS and the original demo has some access, but the core unchanged.

Iii. methods of Use

Like a typical jquery plugin, this plugin is easy to use. The method is pagination , for example $("#page").pagination(100); , where the 100 parameters are required to indicate the total number of items displayed, which is the simplest use, and the resulting display is as follows:

It is also worth mentioning that the paging list needs to be placed within a label that has a class class of pagination, and you can use the Text-align property to control whether the page is centered or displayed right.

The callback function is typically used to load the content that corresponds to the paging display, as detailed in the demo source file.

Four, parameter

Name of parameter	Description	parameter Values
MaxEntries	Total number of entries	Required arguments, integers
Items_per_page	Number of entries displayed per page	Optional parameter, default is 10
Num_display_entries	Number of page entries displayed in the Continuous Paging body section	Optional parameter, default is 10
Current_page	The currently selected page	Optional parameter, default is 0, represents page 1th
Num_edge_entries	Number of entries on both sides of the page displayed	Optional parameter, default is 0
Link_to	Links to Pagination	String, optional argument, default is "#"
Prev_text	Text displayed on the previous page page-buttons	String argument, optional, default is "Prev"
Next_text	Text displayed on the next page paging button	String argument, optional, default is "Next"
Ellipse_text	What text does the omitted number of pages represent	Optional string parameter, default is "..."
Prev_show_always	Whether to display the previous page page-buttons	Boolean, optional argument, default to True, the previous page button is displayed
Next_show_always	Whether to display the next page page-buttons	Boolean, optional argument, default to True, Next page button displayed
Callback	callback function	Default no execution effect

v. Examples of Use

For example, use the following code:

Copy Code code as follows:

$ ("#Pagination"). Pagination (56, {
Num_edge_entries:2,
Num_display_entries:4,
Callback:pageselectcallback,
Items_per_page:1
});

The meaning of this code is: a total of 2 (maxentries) list items, the end of both sides of the page is displayed at the end of the num_edge_entries, the number of consecutive page bodies show 4 (num_display_entries), The callback function is Pageselectcallback (callback), and the list item displayed on each page is 1 (items_per_page). You can modify the parameters in this configuration against the parameter table. Vi. Some instructions on demo

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

All of the demo page JS annotation I have changed to the Chinese annotation, the difficulty is the callback function, the demo in the callback function has two parameters, one is Page_index, the other is JQ, the previous one represents the page index of the pages you currently clicked, and the next parameter represents the loading container. The number of pages indexed here is the key, we have to find the corresponding (for example) HTML elements based on this index value, and then display in the specified container, the demo provides a way to load single elements and multiple elements, I believe it will not be too much problem.

All right, that's it!

If you find that the article is inaccurate or has related issues that need to be communicated, you can comment or go here and ask for an exchange.
(End of this article)