我正在写新闻源,我想知道如何在不刷新的页面上分页。当我点击一个按钮时,我执行一个json请求来获取新数据,但我不刷新页面。
这就是我所拥有的:
HTML
<!-- Forum -->
<div id="forum"><center>Loading forum...</center></div>
<!-- Forum pagination -->
<ul class="pager">
<li class="previous" id="forum-prev">
<a href="#forum-top">Prev</a>
</li>
<li class="next" id="forum-next">
<a href="#forum-top">Next</a>
</li>
</ul>
JS
function updateButtons()
{
// Button prev forum
$("#forum-prev").click(function() {
var page = parseInt($.cookie("page"));
page -= 1;
$.cookie("page", page);
loadforum();
updateButtons();
});
// Button next forum
$("#forum-next").click(function() {
var page = parseInt($.cookie("page"));
page += 1;
$.cookie("page", page);
loadforum();
updateButtons();
});
// Disable buttons
if($.cookie("page") >= 0)
{
$("#forum-prev").removeClass("active");
$("#forum-prev").addClass("disabled");
$("#forum-prev").unbind("click");
}
else
{
$("#forum-prev").removeClass("disabled");
$("#forum-prev").addClass("active");
$("#forum-prev").bind("click");
}
if($.cookie("page") <= parseInt($.cookie("forum-count"))-1)
{
$("#forum-next").removeClass("active");
$("#forum-next").addClass("disabled");
$("#forum-next").unbind("click");
}
else
{
$("#forum-next").removeClass("disabled");
$("#forum-next").addClass("active");
$("#forum-next").bind("click");
}
}
如果我不刷新页面,那么分页的最佳方法是什么?在page 0(default)
时应该禁用prev按钮,在page > 0
时启用,而在page < maxPage
时应该禁用}}。我尝试使用$.on()
$.off()
,但我有同样的问题,因为JS没有重新加载我无法启用按钮或禁用。