js分页，显示/隐藏页码

最新推荐文章于 2022-08-19 17:37:08 发布

装装装Escape

最新推荐文章于 2022-08-19 17:37:08 发布

阅读量3.4k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/m0_38144477/article/details/76085118

版权

这段代码展示了如何使用JavaScript实现一个分页功能，根据给定的参数（如显示条数、当前页、总条数等）动态生成并显示页码，同时绑定了点击事件，点击页码会触发后台查询相应数据。

摘要由CSDN通过智能技术生成

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

//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);
        $(thi