html表格翻页功能实现

html表格翻页功能实现,在客户端实现,与服务器无关

问题:在不改变服务器形式上实现翻页功能, 增加上一页,下一页等等. 如: 结构如下:

一些关健点

  1. 将当前的点击对象转换成 jquery对象, $(this) or $(current)
  2. 在原有jquery对象查找下级对象为$(xx).find()
  3. 在原有jquery对象查找上级对象$(xx).parent(),$(xx).parents(), $(xx).closest()
  4. 在jquery对象旁边对象, 左$(xx).prev(),右$(xx).next()

javascript 实现


var PAGE_SIZE = 3;
function page_show(items, page, page_count, page_current_num, page_info, next_btn, prev_btn){
  console.log("page_show");
  if (page == 0 || page > (Math.ceil(items.length / page_count))){
    return;
  };
  var start = (page - 1) * page_count;
  if (start > items.length){
    return;
  };
  var end = Math.min(items.length, start + page_count);
  console.log("start:%d,end:%d", start, end);
  page_current_num.text(page);
  items.hide();
  for(var i = start; i < end; i++){
    items.eq(i).show();
  }
  if (page_info != null){
    page_info.text("page " + String(page) + " of " + String(
      Math.ceil(items.length / page_count)));
  }
};

function page_go(o, num, is_absolute){
  // is_absolute == true, num -1 is end
  var $page=$(o).closest(".page");
  var next = 0;
  var $page_content = $page.prev().find(".page-content");
  var $current_page_num = $page.find(".current-page");
  if (is_absolute){
    if (num > 0){
      next = num;
    }
    else{
      next = Math.ceil($page_content.children(":gt(0)").length / PAGE_SIZE);
    }
  }
  else{
    next = Number($current_page_num.text()) + num;
  }
  $page.find(".page-item-count").text("共" +String($page_content.children(":gt(0)").length) + "记录");
  console.log($page);
  console.log("current-page-num:%d", $current_page_num.text());
  console.log($page_content);
  page_show($page_content.children(":gt(0)"), next, PAGE_SIZE, $page.find(".current-page"), $page.find(".page-info"),
            $page.find(".next-page"), $page.find(".prev-page")
           );
}

$(document).ready(function(){
    console.log($(".next-page").length);
    for(var i=0; i < $(".next-page").length;i++){
      console.log($(".next-page").eq(i));
      page_go($(".next-page").eq(i), 1, true);
    };
    $(".next-page").click(function () {
      page_go(this, 1, false);
    });
    $(".prev-page").click(function () {
      page_go(this, -1, false);
    });
    $(".start-page").click(function(){
      page_go(this, 1, true);
    });
    $(".end-page").click(function(){
      page_go(this, -1, true);
    });
});


Loading Disqus comments...
Table of Contents