基于bootstrap的分页插件bootstrap-paginator

项目中用到了分页,花费了些时间才弄完,总结出来,希望能让大家少走弯路。数据库是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,

效果如下:


你可能感兴趣的:(mysql,ajax分页,bootstrap分页)