你的位置:首页 > Java教程

[Java教程]Bootstrap分页插件


开源中国有一篇介绍的很详细,链接:https://my.oschina.net/shunshun/blog/204587

 

使用这个插件和使用其他Bootstrap内置的插件一样,需要引入如下文件:

<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>

使用实例:

jsp代码

<div  align="right">  <ul id="data-pagination" >    <li ><a href="#">&laquo;</a></li>   <li ><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="#">&raquo;</a></li>  </ul></div>

 

js代码

var pageNumber = 1;
var pageSiza = 10;
function getData() {  $.post("url", {    dataId : dataId,    currentPage: pageNumber,    pageSize : pageSize  }, function(data) {    if (data.totalRow > 0) {      var options = {        currentPage : data.pageNumber,  //变量名必须为currentPage        totalPages : data.totalPage,  //变量名必须为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)就是将id为'data-pagination'的dom元素设置为分页组件,同时传入一些定制参数,currentPage设置当前页码,totalPages设置总页数。