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設置總頁數。