Jquery pagination2.2 Chinese version of the paging plug-in

Jquery pagination
Jquery paging plug-in
* The minimum jquery version is 1.4.2.
* @ Author Gabriel Birke (Birke * at * D-scribe * dot * de)
* @ Version 2.2
QQ: 80213876 http://blog.csdn.net/luoyeyu1989 ============================

Description
-----------
When you have a lot of data and need to display it in pages, this plug-in will help you create pages.

Instructions for use
-----
Reference jquery and JS on the current page and the corresponding CSS file.
Create a tag for the paging link in the body.
Add an ID or class attribute (for example, "news-pagination") to this tag ").
This attribute will be used in the jquery selector.

Next, write a js method containing the 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 20 elements in the content Array
For (VAR I = new_page_id; I <; I ++ ){
$ ('# Mycontentarea'). append (content [I]);
}
Return false;
}

This callback function requires jquery's knowledge about Dom operations.
You can write the code on your own.

In page initialization, when you know that many records are to be displayed, create the following paging elements:
// The first parameter: Total number of records
// Second parameter: Object options
$ ("# News-pagination"). pagination (122 ,{
Items_per_page: 20, // pagesize maximum number of entries per page
Callback: handlepaginationclick
});

This will create a paging navigation link in the container. You will see
Number 1-7. the first digit is highlighted. When you click another page number,
Highlighting will change and the callback function "handlepaginationclick"
Called.

You can use option and some elements to configure the plug-in height.

Available options:
-----------------
The specific descriptions of options are as follows:

Callback
When you click the page number, the callback function is called. This function receives two parameters: the new page number index and the paging container (DOM ).
If the callback function returns false, the event is not executed.
This callback function is essential in paging!
It should include some code you have added.
To speed up user experience, you should not load content here through Ajax. Instead, you can pre-load some content and use this function to browse by page.
Default Value: "function () {return false ;}".

Current_page
The page selected during page initialization. That is, the current page.
Default Value: 0

Items_per_page
Pagesize, the maximum number of records per page.
Default Value: 10

Link_to
The link on the page. Usually the page is triggered by the onclick event. If the Link contains parameters such as ID
It will replace the original paging link.
Default Value :"#"

Num_display_entries
Number of visible page numbers. It is recommended to set it to an odd number (symmetric nice looking)
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 of the previous page.
Default Value: "previous"

Prev_show_always
Whether the "Previous Page" is always displayed ".
Default Value: True

Num_edge_entries
If it is set to 1, "Homepage" and "last page" are displayed ". You can also set the number of vertices to display more links.
Default Value: 0

Ellipse_text
When the numbers on different pages are quite different, 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 is initialized. If you use ajax to display the content, set it to false when initializing the paging plug-in;
Default Value: True

Custom Event trigger pagination
----------------------------------------
// Go 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 page number range, the pagination event is triggered. Otherwise, the pagination event is not triggered.

 

 

:Http://ishare.iask.sina.com.cn/f/21330704.html

Note:

1: CSS problems under IE6, because IE6 does not support multiple selection classes (for example, there is no space in the middle of ". Current. Next"), leading to incorrect style. Remove the last pagination.css style.

. Pagination {
Font-size: 80%;
}

. Pagination {
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 "link_to" example (give the URL address image of the page, xxxxxx.html? Id = 123 ):

<SCRIPT type = "text/JavaScript"> // This is a very simple demo that shows how a range of elements can // be paginated. // The elements that will be displayed are in a hidden Div and are // cloned for display. the elements are static, there are no Ajax // callinvolved. /*** callback function that displays the content. ** gets called every time the user clicks on a pagination link. ** @ Param {int} Page_index new page index * @ Param {jquery} JQ the container with the pagination links as a jquery object */function pageselectcallback (page_index, JQ) {var new_content = jquery ('# hiddenresult Div. result: eq ('+ page_index + ')'). clone (); $ ('# searchresult '). empty (). append (new_content); // return false;}/*** initialisation function for pagination */function initpagination () {// count entries insi De the hidden content var num_entries = jquery ('# hiddenresult Div. result '). length; // create content inside pagination element $ ("# pagination "). pagination (num_entries, {callback: pageselectcallback, items_per_page: 3, // show only one item per pagenum_edge_entries: 2, link_to :"? Id =__ ID _ "// In the paging JS," _ id _ "is automatically replaced with the current number. 0 is the first page}); // when loading the page, select the specified page $ ("# pagination "). trigger ('setpage', [parseint (getquerystring ("ID")]);} // when document is ready, initialize pagination $ (document ). ready (function () {initpagination () ;}); // obtain 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>

3: Ajax is simple. No more.