Bootstrap Paginator

写在前面

考虑到数据量的问题,特引入bootstrap的分页插件。插件下载地址:https://github.com/lyonlai/bootstrap-paginator

步骤

引入必需的js和css文件。然后初始化分组插件,options的配置,单击页数可以ajax请求服务端获取数据实现无刷新分页。

<script>
    $(function () {
        var options = {
            size: "large",
            bootstrapMajorVersion: 3,
            //当前页
            currentPage: 1,
            //可以改变显示的页码数
            numberOfPages: 5,
            //总页数
            totalPages: 11,
            onPageClicked: function (e, originalEvent, type, page) {
                //页码单击事件
                console.log(page);
            }
        };
        var element = $('#logPage');
        element.bootstrapPaginator(options);
    });
</script>
 <ul id='logPage' style="margin:0 auto; margin-left:30%;"></ul>

结果

总结

引入一款分页的插件,项目中很多地方都会用到。