js分页，显示/隐藏页码

来源：互联网发布：算法引论中文版 pdf 编辑：程序博客网时间：2024/05/31 18:37

由此获取思路，进行一些修改点击打开链接

//id-->div的ID（"#divId"），分页放到此div中
//size-->显示条数
//current-->当前页
//total-->总条数
//type,classId,level,num,dists_code,city_dists_code,administrative,roadcode,qsZh,zdZh,years 点击链接，查询相对应页码的数据

function TablePage(id,size,current,total,type,classId,level,num,dists_code,city_dists_code,administrative,roadcode,qsZh,zdZh,years){
  var $table = $(id);
     var currentPage = current; //当前页
     var pageSize = size; //每页行数（不包括表头）
     $table.bind("repaginate", function()
     {
       $table.find("div").hide().slice(0 * pageSize, (0 + 1) * pageSize).show();
     });
     var numRows = total; //记录宗条数
     var numPages = Math.ceil(numRows/pageSize);    //总页数
     var page = current;
     var $pager = $("<div class='page' style='width: 330px;text-align: center;'></div>"); //分页div

     // 清空分页div
     $(".page").empty();
     //为分页标签加上链接
     if (page > 1) {//上一页+ 第一页
       var sy = '<a style="text-decoration: none;" href="javascript:void(0)"><span id="Prev" style="margin-right:10px;"><上一页</span></a>';
       $pager.append(sy);
    $("<a style='text-decoration: none;' href='javascript:void(0)' ><span id='"+1+"'>"+ 1 +"</span></a>")
      .bind("click", { "newPage": 1 }, function(event){
        currentPage = event.data["newPage"];

        //sousuo    查询后台方法
        sousuo(classId,currentPage,type,level,num,dists_code,city_dists_code,administrative,roadcode,qsZh,zdZh,years);
        $(this).children("span").attr("class","click_page");
        $(this).children("span").css({"color":"#049FF1","background":"#CCC"});
        $(".page a span").not($(this).children("span")).attr("class","");
        $(".page a span").not($(this).children("span")).css({"color":"#049FF1","background":"#FFFFFF"});
        $table.trigger("repaginate");
      }).appendTo($pager);
      $pager.append(" ");
    var next = '<a style="text-decoration: none;" href="javascript:void(0)"><span id="Next">下一页></span></a>';
    $pager.append(next);
   }
     $pager.insertAfter($table);//分页div插入table
     $("#"+page+"").attr("class","click_page");
     $("#"+page+"").css({"color":"#049FF1","background":"#CCC"});
     $table.trigger("repaginate");
     $("#Prev").bind("click",function(){
       var prev=Number($(".click_page").text())-2;
       currentPage=prev;
       $(this).css({"background":"#CCC"});
       if(currentPage<0) {
        $(this).css({"background":"#CCC"});
        alert("已经是第一页！")
        return;
       }else{
        //如果不是第一页，执行查询方法
        sousuo(classId,currentPage,type,level,num,dists_code,city_dists_code,administrative,roadcode,qsZh,zdZh,years);
       }
       $("#"+(page+1)).show();
       $("#"+(prev+1)).attr("class","click_page");
       $("#"+(prev+1)).css({"color":"#049FF1","background":"#CCC"});
       $(".page a span").not($("#"+(prev+1))).attr("class","");
       $(".page a span").not($("#"+(prev+1))).css({"color":"#049FF1","background":"#FFFFFF"});
       $table.trigger("repaginate");
     });
     $("#Next").bind("click",function(){
       var next=$(".click_page").attr("id");
       currentPage=Number(next);
       $(this).css({"background":"#FFFFFF"});
       if(currentPage+1>numPages) {
        $(this).css({"background":"#CCC"});
        alert("已经是最后一页！")
        return;
       }else{
        //如果不是最后一页，执行查询方法
        sousuo(classId,currentPage,type,level,num,dists_code,city_dists_code,administrative,roadcode,qsZh,zdZh,years);
       }
       $("#"+currentPage).attr("class","click_page");
       $("#"+currentPage).css({"color":"#049FF1","background":"#CCC"});
       $(".page a span").not($("#"+currentPage)).attr("class","");
       $(".page a span").not($("#"+currentPage)).css({"color":"#049FF1","background":"#FFFFFF"});
       $table.trigger("repaginate");
     });
}

阅读全文

0 0