近期使用了bootstrap的pages控件和ajax来分页获取数据。学习了很多东西,记录下来。
<link href="__PUBLIC__/js/jBootstrapPage-master/jBootsrapPage.css" rel="stylesheet" />
<script src="__PUBLIC__/js/jBootstrapPage-master/jBootstrapPage.js"></script>
<div class="pages">
<span>共{$totalCount}条</span>
<div style="padding-left:100px;">
<p id="pageIndex" style="font-size:20px;font-weight:bold;color:blue;margin-left:150px;"></p>
<ul class="pagination"></ul>
</div>
</div>
createPage(10, 10, 150);
function createPage(pageSize, buttons, total) {
$(".pagination").jBootstrapPage({
pageSize : pageSize,
total : total,
maxPageButton:buttons,
onPageClicked: function(obj, pageIndex) {
var searchNickname = $("#searchNickname") .val();
var searchTitle = $("#searchTitle") .val();
var searchTag = $("#searchTag") .val();
var isHotReplay = $("#isHotReplayHideInput") .val();
$.get("__URL__",{page:pageIndex+1,name:searchNickname,title:searchTitle,isHotReplay:isHotReplay},function(data){
console.log(data);
$(".adv-table").empty().append(data);
});
}
});
}
$page2