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

 

转载于:https://www.cnblogs.com/dafeifei0218/p/7340254.html