JQuery Pagination2.2 Paging Plugin Chinese version

Source: Internet
Author: User

JQuery Pagination Chinese Description document
jquery Paging Plugin
* The minimum jquery version required is 1.4.2
* @ author Gabriel Birke (Birke *at* d-scribe *dot* de)
* @ VERSION 2.2
* Translation: Dust floc margin qq:80213876 http://blog.csdn.net/luoyeyu1989 ========================

Description
-----------
This plugin will help you create pagination when you have a lot of data that needs to be displayed as pagination in the Web page.

Instructions for use
-----
References jquery and this page's JS and corresponding CSS files in the page.
Create a pair of labels in the body that hold the page links.
Add an ID or class attribute to the tag (such as "news-pagination").
This property will be used for the jquery selector.

Next, write a JS method that contains both New_page_index and Paging_container parameters. This method is the callback function after you click the paging link.
When you click the page number, the corresponding page number is selected.
function Handlepaginationclick (New_page_index, Pagination_container) {
This will select the elements in the 20 content array
for (Var i=new_page_id;i<;i++) {
$ (' #MyContentArea '). Append (Content[i]);
}
return false;
}

This callback function needs to use jquery's knowledge of DOM operations.
The code inside can be written on its own.

In page initialization, when you know that there are many records to display, create the following pagination elements:
First parameter: Total number of records
Second parameter: Object options
$ ("#News-pagination"). Pagination (122, {
ITEMS_PER_PAGE:20,//pagesize How many displays per page
Callback:handlepaginationclick
});

This creates a paging link in the container. You will see
The number 1-7, the first number is highlighted. When you click another page number,
Highlighting will change and the callback function "Handlepaginationclick"
Be invoked.

This plugin can be configured highly by option and some elements.

Available options:
-----------------
The following is a specific description of options:

Callback
When the user clicks the page number, the callback function is invoked. This function receives two parameters: the new page number index and the paging container (DOM).
If the callback function returns FALSE, the event does not execute.
This callback function is essential for paging.
It should include some of the code you have added.
To speed up the user experience, you should not be able to load content through Ajax here. Instead, you can preload some content and then use this function to page through.
Default value: "function () {return false;}".

Current_page
The page that is selected when paging is initialized. Which is the current page
Default value: 0

Items_per_page
PageSize, the maximum number of records to display per page.
Default value: 10

Link_to
Links on pagination. Usually pagination is triggered by the onclick event. If this link contains parameters such as ID, etc.
, it will replace the original paging link.
Default value: "#"

Num_display_entries
The number of page numbers visible. The recommended setting is odd (symmetry looks better)
Default value: 11

Next_text
Next page text
Default value: "Next"

Next_show_always
Whether the next page is always displayed.
Default value: ' True '

Prev_text
The text on the previous page.
Default value: "Previous"

Prev_show_always
Whether the previous page is always displayed.
Default value: True

Num_edge_entries
If set to 1, display "Home" and "last". You can also set it to a larger number to show more links.
Default value: 0

Ellipse_text
When the number of page numbers is very far apart, for example: 1 2 3 ... 10 11 12
Characters displayed (in span)
Default value: "..."

Load_first_page
If true, the callback function is executed when the plug-in initializes. If you are using AJAX to display content, you should set it to false when initializing the paging plugin;
Default value: True


Custom Event Triggers paging
----------------------------------------
Skip to Page 5th
$ ("#News-pagination"). Trigger (' Setpage ', [4]);
Next page
$ ("#News-pagination"). Trigger (' nextPage ');
Previous page
$ ("#News-pagination"). Trigger (' prevpage ');

Note: If the specified page number is within the range of the page number, the paging event is triggered, otherwise it is not triggered.

Download Address: http://ishare.iask.sina.com.cn/f/21330704.html

Under Description:

1:ie6 the following CSS problem, because IE6 does not support multiple selection classes (such as: ". Current. Next" without spaces), causing the style to be incorrect. Remove the last style of the pagination.css.

. pagination {
font-size:80%;
}

. pagination a {
Text-decoration:none;
Border:solid 1px #AAE;
Color: #15B;
}

. pagination A,. Pagination span {
Display:block;
Float:left;
Padding:0.3em 0.5em;
margin-right:5px;
margin-bottom:5px;
Min-width:1em;
Text-align:center;
}

. Pagination. Current {
Background: #eee;
Color: #555;
Border:solid 1px #AAE;
}

2: Manually set the "link_to" attribute (let the page URL address presentable, xxxxxx.html?id=123):

        <script type= "Text/javascript" >//This are a very simple demo-shows how a range of
            Elements can//be paginated. The elements that'll be displayed are in a hidden DIV and are//cloned for display.
        
            The elements are static, there are no Ajax//calls involved.
             /** * Callback function that displays the content.
             * * Gets called every time of the user clicks on a pagination link. * * @param {int} page_index New Page index * @param {jQuery} JQ the container with the Paginatio N Links as a JQuery object */function Pageselectcallback (Page_index, JQ) {var ne
                W_content = JQuery (' #hiddenresult div.result:eq (' +page_index+ ') '). Clone ();
                $ (' #Searchresult '). Empty (). append (new_content);
            return false; }
           
            /**
             * Initialisation function for pagination */function initpagination () { Count entries inside the hidden content var num_entries = jQuery (' #hiddenresult div.result '). Lengt
                H
                    Create content inside pagination element $ ("#Pagination"). Pagination (Num_entries, { Callback:pageselectcallback, items_per_page:3,//Show only one item per page Num_edge_entries:2 , link_to: "id=__id__"//Paging JS will automatically replace the "__id__" with the current number.
				0 is the first page});
             When the page loads, select the specified page $ ("#Pagination"). Trigger (' Setpage ', [parseint (GetQueryString ("id")]);      
                //When the document is ready, initialize pagination $ (document). Ready (function () {
            Initpagination ();
			}); Gets the URL parameter function getquerystring (name) {var reg = new RegExp (^|&) + name + = ([^&]*) (&|$)
				"," I "); var r = WINDOW.LOCATION.SEARCH.SUBSTR (1). Match (REG); if (r!= null) return unescape (r[2]);
			return null; } </script>

The 3:ajax is very simple. Do not say.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.