基于bootstrap的分页插件bootstrap-paginator

最新推荐文章于 2024-06-09 18:06:43 发布

Richard_Li5976

最新推荐文章于 2024-06-09 18:06:43 发布

阅读量3.7k

点赞数 1

分类专栏：工作备忘文章标签： ajax分页 bootstrap分页 mysql

本文链接：https://blog.csdn.net/liyan_5976/article/details/26834095

版权

工作备忘专栏收录该内容

5 篇文章 0 订阅

订阅专栏

项目中用到了分页，花费了些时间才弄完，总结出来，希望能让大家少走弯路。数据库是mysql，用到了mysql的limit start,len

首先下载：bootstrap-paginator的js插件，地址：

然后在页面中:

<div id="pagination" ></div>

var options = {
	        currentPage: 1,
//              totalPages :10,             
                itemContainerClass: function (type, page, current) {
	            return (page === current) ? "active" : "pointer-cursor";
	        },
	        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){
	
	            e.stopImmediatePropagation();
	            var currentTarget = $(e.currentTarget);
	            var pages = currentTarget.bootstrapPaginator("getPages");
	            // Ajax calling
	            setTableData(page);
	            currentTarget.bootstrapPaginator("show",page);
	            updatePagesInfo($("#totalRecord").val(), page);
	        },
	        pageUrl: function(type, page, current){
	            return "#";
	        }
	    };

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

options中的数值是可以动态设置的，如要根据查询条件或去总的记录数，options.totalPages = 20,

效果如下：