Bootstrap分页插件--Bootstrap Paginator

开源中国有一篇介绍的很详细，链接：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  class="padlr" align="right">
　　<ul id="data-pagination" class="pagination">
   　　<li  class="disabled"><a href="#">&laquo;</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="#">&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设置总页数。

来源：https://www.cnblogs.com/ltchu/p/5962415.html

标签

bootstrap分页

data