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);

 

posted @ 2017-08-10 17:10  大飞飞0218  阅读(1341)  评论(0编辑  收藏  举报