星空网 > 软件开发 > Java

Bootstrap分页插件

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

 

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

<link href="css/bootstrap.css" rel="stylesheet"><script type="text/javascript" src='/images/loading.gif' data-original="js/jquery-1.8.1.js"></script><script type="text/javascript" src='/images/loading.gif' data-original="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设置总页数。




原标题:Bootstrap分页插件

关键词:分页

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流