boostrap样式的分页插件twbsPagination 使用方法

 twbsPagination 分页插件默认样式是bootstrap风格的,官方网址:http://esimakin.github.io/twbs-pagination/

使用方法 首先引人jquery 和bootstrap的

<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/lib/jquery-3.0.0.min.js" type="text/javascript"></script>
<script src="js/lib/bootstrap.min.js" type="text/javascript"></script>

调用方法在取得数据和分页信息后调用如下函数

$('#pagination').twbsPagination({
		currentPage: page.currentPage,
        totalPages: Math.ceil(page.totalCount/page.pageSize),
        startPage: 1,
        visiblePages: 7,
        first: "首页",
        last: "未页",
        prev: '上一页',
        next: '下一页',
        initiateStartPageClick: false,
        onPageClick: function (event, page) {
            $('#page-content').text('Page ' + page);
            User.getList(page,User.param);
        }
    });

部分参数说明:

设置显示中文的参数是first: "首页",last: "未页", prev: '上一页',next: '下一页',

currentPage:当前页数,totalPages:总共多少页

initiateStartPageClick:初始化时是否执行分页事件 默认为true

 

需要注意事项,在多条件查询时分页没有变化 解决方法

if(User.totalCount && User.totalCount != totalCount){
		$('#pagination').empty();
		$('#pagination').removeData("twbs-pagination");
		$('#pagination').unbind('page');
	}
	User.totalCount = totalCount;

判断总数量是否发生变化,如何有变化 进行清空处理。

来源://作者:/更新时间:2018-07-14
相关文章
评论:
验证码:
匿名评论: