Bootstrap使用记录–paginator分页

最新推荐文章于 2024-10-08 09:00:00 发布

原创最新推荐文章于 2024-10-08 09:00:00 发布 · 467 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #分页

本文详细介绍了如何使用bootstrap-paginator.min.js实现网页分页功能，包括引入依赖、设置分页参数、生成分页按钮等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

paginator分页插件

需要引入bootstrap-paginator.min.js
插件地址(包含文档):https://github.com/lyonlai/bootstrap-paginator.git
确定容器
<div id="page"></div>
js生成分页

var totalPages = Math.ceil(data.total/10);//data为数据
var options = {  
      currentPage: 1,  //默认第一页
      totalPages: totalPages,  //总页数
      size:"normal",  
      alignment:"center",  
      itemTexts: function (type, page, current) {  
                switch (type) {  
                    case "first":  
                        return "首页";  
                    case "prev":  
                        return "<<";  
                    case "next":  
                        return ">>";  
                    case "last":  
                        return "末页";  
                    case "page":  
                        return  page;  
                }                 
            },  
       onPageClicked: function (e, originalEvent, type, page) {  
                         alert("当前是第"+page+"页")       
                    }  
       }  

                            $('#page').bootstrapPaginator(options);