第一:twbs-pagination的简单介绍
twbs-pagination是一个简单的自适应bootstarp样式分页插件。
他的官网:https://github.com/josecebe/twbs-pagination
第二步:使用他之前 先导入twbspagination,jquery的js文件以及bootstarp的css文件
<script src="../static/assets/vendors/jquery/jquery.js"></script>
<script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
<script src="../static/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>
第三步:如下图
$(function ($) {
function loadPage(page){
$.get('/admin/api/commentsAll.php', {page:page}, function (data) {
console.log(data);
var ht = $("#comments_tmpl").render({comments: data});
$("tbody").html(ht);
}, 'json');
}
loadPage(1);
$(".pagination").twbsPagination({
totalPages: 100,
visiblePages:5,
startPage:1,
first:"首页",
last:"页尾",
prev:"上一页",
next:"下一页",
onPageClick: function (e,page) {
loadPage(page);
}
})
})
效果 :
部分参数说明:
设置显示中文的参数是first: “首页”,last: “未页”, prev: ‘上一页’,next: ‘下一页’,
currentPage:当前页数,totalPages:总共多少页
initiateStartPageClick:初始化时是否执行分页事件 默认为true
和ajax配合使用