Home > Developer > Web Develop
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<link rel= "stylesheet" href= "Pagination.css"/>
<script type= "Text/javascript" src= "Jquery.min.js" ></script>
<script type= "Text/javascript" src= "Jquery.pagination.js" ></script>
<!--Load data to Paginate--
<script type= "Text/javascript" src= "Members.js" ></script>
<script type= "Text/javascript" >
/**
* @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 items_per_page = 5;
var Max_elem = Math.min ((page_index+1) * items_per_page, members.length);
var newcontent = ';
Iterate through a selection of the content and build an HTML string
for (Var i=page_index*items_per_page;i<max_elem;i++)
{
Newcontent + = ' <dt> ' + members[i][0] + ' </dt> ';
Newcontent + = ' <dd class= ' state ' > ' + members[i][2] + ' </dd> ';
Newcontent + = ' <dd class= ' Party ' > ' + members[i][3] + ' </dd> ';
}
$ (' #Searchresult '). HTML (newcontent);
return false;
};
$ (document). Ready (function () {
$ ("#Pagination"). Pagination (303, {
Prev_text: ' Previous page ',
Next_text: ' next page ',
Num_edge_entries:2,
Items_per_page:5,
Num_display_entries:10,
Callback:pageselectcallback
});
});
</script>
<title>Pagination</title>
<body>
<div id= "Content" >
<DL id= "SearchResult" >
<dt>something Error ...</dt>
</dl>
<div id= "pagination" class= "pagination" >
</div>
</div>
</body>
Here is the page effect:
Parameter description:
| Name of parameter | Description | parameter Values |
|---|---|---|
| MaxEntries | Total number of entries | Required parameter, Integer |
| Items_per_page | The number of entries displayed per page | Optional parameter, default is 10 |
| Num_display_entries | Number of page entries displayed in the main part of the continuous paging | Optional parameter, default is 10 |
| Current_page | The currently selected page | Optional parameter, default is 0, indicates 1th page |
| Num_edge_entries | Number of entries for the end-to-end page displayed on both sides | Optional parameter, default is 0 |
| Link_to | Links to Pagination | String, optional parameter, default is "#" |
| Prev_text | Text displayed on the previous Page page-out button | String parameter, optional, default is "Prev" |
| Next_text | Text that appears on the next page of the paging button | String parameter, optional, default is "Next" |
| Ellipse_text | What text does the omitted number of pages indicate | Optional string parameter, default is "..." |
| Prev_show_always | Whether to display the previous page paging button | Boolean, optional parameter, default true, which displays the previous page button |
| Next_show_always | Whether to display the next page paging button | Boolean, optional parameter, true by default, displays the next page button |
| Callback | callback function | This function is called when the link is clicked, this function takes two parameters, the ID of the new page, and the pagination container (a DOM element). If the callback function returns false, the pagination event stops executing |
Style effects Show:
The demo link is as follows:
Http://files.cnblogs.com/xiexy/pagingnation.rar
To this end, mainly to do their own memo, at the same time to facilitate the needs of people. Oh!
Ajax Pagination Layout Refresh
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
