没有更新功能的jquery paginate

时间:2013-07-01 04:16:24

标签: javascript jquery

我正在写新闻源,我想知道如何在不刷新的页面上分页。当我点击一个按钮时,我执行一个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没有重新加载我无法启用按钮或禁用。

0 个答案:

没有答案