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
顶
踩
相关文章: