Bootstrap Paging Plug-in bootstrap paginator examples of _javascript skills

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!