bootstrap-paginator设置使用Bootstrap v3版本的样式
开始使用时,我的Bootstrap版本是v3.3.7,仿着写完之后没有样式效果,看了源码才知道,3.3.7的版本的.pagination没有设置ul,是.pagination > li写的。
bootstrap-paginator中做了适配,在57行左右,"if (version > 2 && !this.$element.is("ul"))",这句需要把元素卸载ul上。
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." }
Html代码如下,版本2,会把id="example"写在div中,如果用版本3,需要这样写:
<div> <ul id="example"></ul> </div>
Javascript代码
var options = { bootstrapMajorVersion: 3, //版本,这里设置为3,大于2即可 currentPage: @ViewBag.PageIndex,//当前页 totalPages: $("#totalpage").val(),//总页数 numberofPages: 10,//显示的页数 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) { //异步换页 //请求加载数据 } }; $("#example").bootstrapPaginator(options);