Bootstrap Paging Plug-in bootstrap paginator examples of _javascript skills

Source: Internet
Author: User

Bootstrap Paginator is a Bootstrap based on the JS paging plug-in, the function is very rich, the individual feel that this plug-in has been impeccable. It provides a range of parameters to support user customization, providing a public way to get plug-in state changes at any time, and events to listen for user actions. Currently tested browsers include: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+.

Website address: http://bootstrappaginator.org/

Downloadvisit Project in GitHub

Using this plugin, as with other bootstrap built-in plug-ins, you need to introduce the following files:

<link href= "Css/bootstrap.css" rel= "stylesheet" >
<script type= "Text/javascript" src= "js/" Jquery-1.8.1.js "></script>
<script type=" Text/javascript "src=" Js/bootstrap-paginator.js "> </script>

Use instance:

JSP code

<div class= "PADLR" align= "right" > <ul id= "data-pagination" class= "
pagination" >
<li class= " Disabled "><a href=" # ">«</a></li>
<li class=" active "><a href=" # ">1</a> </li>
<li><a href= "#" >2</a></li>
<li><a href= "#" >3</a> </li>
<li><a href= "#" >4</a></li>
<li><a href= "#" >5</a> </li>
<li><a href= "#" >»</a></li>
</ul>
</div>

JS Code

var pagenumber = 1;
var Pagesiza = ten;
function GetData () {
$.post ("url", {
dataid:dataid,
currentpage:pagenumber,
pagesize:pagesize
}, function (data) {
if (Data.totalrow > 0) {
var options = {
CurrentPage:data.pageNumber,//variable name must be C Urrentpage
totalPages:data.totalPage,//variable name must be TotalPages
ajaxoption: {
url: ' url ',
pageSize: PageSize,
Dataid:dataid,
appendelement: ' data-list ',
templateid: ' Tpl-data-list ',
otherparams:{
}
,
}
$ (' #data-pagination '). Bootstrappaginator (options);
var html = template ("Tpl-data-list", data);
$ (' #data-list '). HTML (HTML);
else {
$ (' #data-list '). HTML ("");}}
);

$ (' #data-pagination '). Bootstrappaginator (options) is to set the DOM element with ID ' data-pagination ' as a paging component, passing in some custom parameters, CurrentPage sets the current page number, TotalPages sets the total pages.

The above is a small set up to introduce the bootstrap paging plug-in bootstrap paginator examples, I hope to help you, if you have any questions welcome to my message, small series will promptly reply to everyone, here also thank you for your support cloud Habitat community site!

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.