使用Bootstrap Paginator 进行分页时遇到几个问题,在此描述一下(代码是从网上找的),
1. 提示bootstrapPaginator is not a function
可能是页面(包括子页面,或者父页面)引入了多个jquery.js文件,删除多余的js文件,仅需一个jquery.js就ok
2. 分页样式没有显示出来
可能是bootsrapMajorVersion 的版本设置问题
//源码里面已经给了提示
init: function (element, options) {
this.$element = $(element);
var version = (options && options.bootstrapMajorVersion) ? options.bootstrapMajorVersion : $.fn.bootstrapPaginator.defaults.bootstrapMajorVersion,
id = this.$element.attr("id");
if (version === 2 && !this.$element.is("div")) {
throw "in Bootstrap version 2 the pagination must be a div element. Or if you are using Bootstrap pagination 3. Please specify it in bootstrapMajorVersion in the option";
} else if (version > 2 && !this.$element.is("ul")) {
throw "in Bootstrap version 3 the pagination root item must be an ul element."
}
bootstrapMajorVersion: 3,//如果是bootstrap3版本需要加此标识,并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本,则DOM包含元素是DIV
js代码如下 大部分为网上粘贴代码
function AjaxPaginator(obj) {
var totalPages = 5;//设置的吃食总页数
totalPages = pageCount(totalPages,getQueryString("videoId")); //加载总页数,确认页数的单独的函数里面有ajax操作
//alert(totalPages);
var currentPage=1;
var options = {
currentPage: currentPage, //当前页
totalPages: totalPages, //总页数
numberOfPages: totalPages, //设置控件显示的页码数
bootstrapMajorVersion: 3,//如果是bootstrap3版本需要加此标识,并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本,则DOM包含元素是DIV
useBootstrapTooltip: false,//是否显示tip提示框
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 (event, originalEvent, type, page) {
loadIssue(page);//页面跳转后调用ajax函数进行页面信息展示以及DOM操作
}
}
obj.bootstrapPaginator(options);
}
AjaxPaginator($('.pagination'));