AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

团队筛选功能，上一页，下一页，数字按钮省略

2024-08-15 36
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 团队筛选功能，上一页，下一页，数字按钮省略

团队筛选不仅可以点击上一页，下一页，数字，首页，尾页可以跳转对应页面，还可以根据数字按钮的长度省略按钮，当排序达到十页时，才会触发。

小于十页，全部显示。

HTML代码内容及注释：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      tr,
      td {
        padding: 10px;
        text-align: center;
      }
 
      thead {
        background-color: #d5d5d5;
      }
 
      .page {
        margin: 20px;
        display: flex;
      }
 
      .top_page {
        margin-left: 10px;
        width: 56px;
        height: 25px;
        border: #000000 1px solid;
        text-align: center;
        line-height: 25px;
      }
 
      .num_page {
        margin-left: 10px;
        width: 25px;
        height: 25px;
        border: #000000 1px solid;
        text-align: center;
        line-height: 25px;
      }
 
      .bot_page {
        margin-left: 10px;
        width: 56px;
        height: 25px;
        border: #000000 1px solid;
        text-align: center;
        line-height: 25px;
      }
 
      .inp {
        margin-left: 10px;
      }
 
      .text_page {
        margin-left: 10px;
        width: 40px;
        height: 25px;
        border: #000000 1px solid;
        text-align: center;
        line-height: 25px;
      }
 
      .first {
        margin-left: 10px;
        width: 40px;
        height: 25px;
        border: #000000 1px solid;
        text-align: center;
        line-height: 25px;
      }
 
      .foot {
        margin-left: 10px;
        width: 40px;
        height: 25px;
        border: #000000 1px solid;
        text-align: center;
        line-height: 25px;
      }
 
      .reveal {
        width: 80%;
        height: 30px;
        display: flex;
        text-align: center;
        margin-left: 26%;
      }
 
      .several {
        width: 20%;
        height: 24px;
      }
 
      .texts {
        margin-left: 30px;
        display: flex;
        margin-top: -14px;
      }
 
      .text {
        margin-left: 6px;
      }
    </style>
  </head>
  <body>
    <!-- 表格 -->
    <table border="1px" cellpadding="10px" style="border-collapse: collapse; margin-left: 100px;">
      <!-- 头部 -->
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>等级</th>
          <th>交易量</th>
        </tr>
      </thead>
      <!-- 内容 -->
      <tbody class="content">
        <tr>
          <td>虚拟星辰</td>
          <td>男</td>
          <td>VIP</td>
          <td>420</td>
        </tr>
      </tbody>
    </table>
    <!-- 页码 -->
    <div class="page">
      <div class="first">首页</div>
      <div class="top_page">上一页</div>
      <div class="num_page"></div>
      <div class="bot_page">下一页</div>
      <div class="foot">尾页</div>
      <input type="text" class="inp" />
      <div class="text_page">跳转</div>
    </div>
    <!-- 显示数据 -->
    <div class="reveal">
      <select class="several" onchange="severals()">
        <option value="3">3</option>
        <option value="5">5</option>
        <option value="8">8</option>
        <option value="10">10</option>
      </select>
      <div class="texts">
        <p class="text">在</p>
        <p class="few"></p>
        <p class="text">页</p>
        <p class="text">显示</p>
        <p class="a"></p>
        <p class="text">-</p>
        <p class="b"></p>
        <p class="text">共</p>
        <p class="c"></p>
        <p class="text">页</p>
      </div>
    </div>
 
    <script src="js/page.js"></script>
  </body>
</html>

js代码及注释：

// 声明总数据
let data;
let xhr = new XMLHttpRequest();
xhr.open('get', 'js/page.json', true);
xhr.send();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    let text = xhr.responseText;
    console.log(text);
    data = JSON.parse(text);
    console.log(data);
    // 调用渲染函数
    list(data);
  }
};
// 当前所在页面 初始值在第一页 
let k = 0;
// 声明初始值 页面显示的数据
let p = 3;
// 声明总页码
let all_page;
// 获取第几页到第几页
let few = document.getElementsByClassName('few')[0];
let a = document.getElementsByClassName('a')[0];
let b = document.getElementsByClassName('b')[0];
let c = document.getElementsByClassName('c')[0];
let numPage = document.getElementsByClassName('num_page')[0];
// 封装函数 
function list(data) {
  console.log(data);
  // 共有几页
  all_page = Math.ceil(data.length / p);
  console.log(all_page);
  // 拼接内容
  let str = '';
  // 拼接页码
  let stre = '';
  // for循环遍历数组 声明变量i i初始值为当前页面乘每页显示数据 i又小于（当前页面+1）乘每页显示数据 i才会++
  for (let i = k * p; i < (k + 1) * p; i++) {
    if (data[i] != undefined) {
      // 拼接内容
      str += `<tr>
          <td>${data[i].name}</td>
          <td>${data[i].sex==1?`男`:`女`}</td>
          <td>${data[i].class == 1?`会员`:data[i].class == 2?`VIP`:`合伙人`}</td>
          <td>${data[i].deal}</td>
        </tr>`;
    }
  };
  // 拼接页码
  stre += `<div class="first" onclick="first()">首页</div>
  <div class="top_page" onclick="previous()">上一页</div>`;
  // for循环遍历数组 i的初始值为0 i小于总页码 i++
  // 判断页码是否小于10，小于10 页码全部渲染。
  if (all_page <= 10) {
    for (let i = 0; i < all_page; i++) {
      stre +=
        `<div class="num_page" onclick="target_page(${i+1})" ${k == i?'style="background-color:#ffff7f"':''}>${i+1}</div>`
    }
    // 否则就判断当k小于3时 渲染页码1，2，3，4，5
  } else if (k < 3) {
    stre += `<div class="num_page" onclick="target_page(${1})" ${k == 0?'style="background-color:#ffff7f"':''}>${1}</div>
      <div class="num_page" onclick="target_page(${2})" ${k == 1?'style="background-color:#ffff7f"':''}>${2}</div>
      <div class="num_page" onclick="target_page(${3})" ${k == 2?'style="background-color:#ffff7f"':''}>${3}</div>
      <div class="num_page" onclick="target_page(${4})" ${k == 3?'style="background-color:#ffff7f"':''}>${4}</div>
      <div class="num_page" onclick="target_page(${5})">${5}</div>
      <div>......</div>`
 
    // 否则判断当k大于等于3且k小于总页码-3时 渲染中间页
  } else if (k >= 3 && k < all_page - 3) {
    stre +=
      `<div>......</div>
      <div class="num_page" onclick="target_page(${k-1})">${k-1}</div>
      <div class="num_page" onclick="target_page(${k})">${k}</div>
      <div class="num_page" onclick="target_page(${k+1})" ${k == k?'style="background-color:#ffff7f"':''}>${k+1}</div>
      <div class="num_page" onclick="target_page(${k+2})" >${k+2}</div>
      <div class="num_page" onclick="target_page(${k+3})">${k+3}</div>
      <div>......</div>`
    // 否则判断k大于总结码减3时 渲染数据
  } else if (k >= all_page - 3) {
    stre +=
      `<div>......</div>
      <div class="num_page" onclick="target_page(${all_page-4})">${all_page-4}</div>
      <div class="num_page" onclick="target_page(${all_page-3})" >${all_page-3}</div>
      <div class="num_page" onclick="target_page(${all_page-2})" ${k == 8?'style="background-color:#ffff7f"':''}>${all_page-2}</div>
      <div class="num_page" onclick="target_page(${all_page-1})" ${k == 9?'style="background-color:#ffff7f"':''}>${all_page-1}</div>
      <div class="num_page" onclick="target_page(${all_page})" ${k == 10?'style="background-color:#ffff7f"':''}>${all_page}</div>`
  };
  stre += `<div class="bot_page" onclick="down()">下一页</div>
      <div class="foot" onclick="foot()">尾页</div>
      <input type="text" class="inp"/>
      <div class="text_page" onclick="leave()">跳转</div>`;
  // 在第几页
  few.innerHTML = k + 1;
  // 显示第几条数据
  a.innerHTML = k * p + 1;
  // 到第几条数据 当到最后一页的时候 页码显示的数量大于总数量时 让他等于总数量的个数 
  b.innerHTML = (k + 1) * p > data.length ? data.length : (k + 1) * p;
  // 共几页
  c.innerHTML = all_page;
  document.getElementsByClassName('content')[0].innerHTML = str;
  document.getElementsByClassName('page')[0].innerHTML = stre;
};
// 点击数字跳转页面 
function target_page(i) {
  k = i - 1;
  // 调用渲染函数
  list(data);
};
// 点击上一页跳转
function previous() {
  // 判断页码大于0 才可以向上一页跳转
  if (k > 0) {
    k--;
  } else {
    alert('没有上一页了')
  };
  // 调用渲染函数
  list(data);
};
// 下一页
function down() {
  // 判断页码小于总页码时 才可以向下一页跳转
  if (k < all_page - 1) {
    k++;
  } else {
    alert('这是最后一页')
  };
  // 调用渲染函数
  list(data);
};
// 点击首页跳转到第一页 
// 给首页添加点击事件，直接让k=0 即为第一页
function first() {
  k = 0;
  // 调用渲染函数
  list(data);
};
// 点击尾页 页面显示最后一页
function foot() {
  k = all_page - 1;
  // 调用渲染函数
  list(data);
};
// 输入数字跳转页面
// 给跳转添加点击事件
function leave() {
  // 获取输入框的值
  let inp = document.getElementsByClassName('inp')[0].value;
  console.log(inp);
  // 判断输入框内容不能为空且输入框内容不能大于最大页码且内容大于0
  if (inp == '' || inp > all_page - 1 || inp < 0 || inp % 1 != 0) {
    alert('没有此页吗');
  } else {
    // k等于输入的数字减一
    k = inp - 1;
  };
  // 调用渲染函数
  list(data);
};
 
// 页面根据下拉框显示数据渲染
// 获取下拉框
let several = document.getElementsByClassName('several')[0];
console.log(several);
// 绑定onchange事件
function severals() {
  //重新赋值
  p = several.value * 1;
  // 获取现在有的页码
  all_page = Math.ceil(data.length / p);
  // 判断k是否大于总页码 
  if (k > all_page - 1) {
    k = all_page - 1;
  };
  // 调用渲染函数
  list(data);
};

json假数据，这里我们写了32条数据：

[{
  "name": "虚拟星辰",
  "sex": 1,
  "class": 2,
  "deal": 420
}, {
  "name": "神秘星河",
  "sex": 2,
  "class": 1,
  "deal": 301
}, {
  "name": "灵光闪现",
  "sex": 1,
  "class": 3,
  "deal": 290
}, {
  "name": "微笑的月亮",
  "sex": 2,
  "class": 2,
  "deal": 468
}, {
  "name": "萌猫棉花糖",
  "sex": 2,
  "class": 2,
  "deal": 105
}, {
  "name": "未知的旅行家",
  "sex": 1,
  "class": 3,
  "deal": 900
}, {
  "name": "匿名旅途",
  "sex": 1,
  "class": 1,
  "deal": 503
}, {
  "name": "数据风暴",
  "sex": 1,
  "class": 2,
  "deal": 790
}, {
  "name": "千变万化",
  "sex": 1,
  "class": 3,
  "deal": 813
}, {
  "name": "梦幻仙境",
  "sex": 1,
  "class": 2,
  "deal": 742
}, {
  "name": "甜点糖果",
  "sex": 2,
  "class": 3,
  "deal": 609
}, {
  "name": "网络风行",
  "sex": 1,
  "class": 3,
  "deal": 305
}, {
  "name": "流星追梦 ",
  "sex": 1,
  "class": 1,
  "deal": 289
}, {
  "name": "孤独的画家",
  "sex": 1,
  "class": 1,
  "deal": 512
}, {
  "name": "星星饼干",
  "sex": 2,
  "class": 2,
  "deal": 1059
}, {
  "name": "幻梦幽影",
  "sex": 2,
  "class": 3,
  "deal": 349
}, {
  "name": "星辰逸羽",
  "sex": 1,
  "class": 1,
  "deal": 59
}, {
  "name": "灵韵流光",
  "sex": 1,
  "class": 3,
  "deal": 783
}, {
  "name": "清风聆心",
  "sex": 2,
  "class": 3,
  "deal": 245
}, {
  "name": "绯色晨曦 ",
  "sex": 2,
  "class": 2,
  "deal": 178
}, {
  "name": "幽夜幻影",
  "sex": 1,
  "class": 1,
  "deal": 853
}, {
  "name": "紫炎幻梦",
  "sex": 2,
  "class": 1,
  "deal": 908
}, {
  "name": "自强不息",
  "sex": 1,
  "class": 2,
  "deal": 1059
}, {
  "name": "步步高升",
  "sex": 2,
  "class": 1,
  "deal": 463
}, {
  "name": "如花似锦",
  "sex": 2,
  "class": 3,
  "deal": 97
}, {
  "name": "前程似锦",
  "sex": 1,
  "class": 2,
  "deal": 289
}, {
  "name": "大展宏图",
  "sex": 2,
  "class": 3,
  "deal": 752
}, {
  "name": "乘风波浪",
  "sex": 1,
  "class": 3,
  "deal": 607
}, {
  "name": "如花似锦",
  "sex": 2,
  "class": 2,
  "deal": 999
}, {
  "name": "好事成双",
  "sex": 1,
  "class": 1,
  "deal": 739
}, {
  "name": "悠悠我心",
  "sex": 2,
  "class": 1,
  "deal": 576
}, {
  "name": "金榜题名",
  "sex": 2,
  "class": 1,
  "deal": 666
}]
文章标签：
JavaScript
数据格式
JSON
乐多_L
目录
相关文章
漏刻有时
|
JavaScript 算法 前端开发
layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）
layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）
漏刻有时
961 0
广州爱奇迪-伍华聪
|
4月前
|
存储 开发框架 前端开发
在Winform分页控件中集成保存用户列表显示字段及宽度调整设置
在Winform分页控件中集成保存用户列表显示字段及宽度调整设置
广州爱奇迪-伍华聪
37 0
爱你三千遍斯塔克
|
5月前
文本-----优化地方----添加搜索框，快捷链接，跳转页面要放置页数跳转框
文本-----优化地方----添加搜索框，快捷链接，跳转页面要放置页数跳转框
爱你三千遍斯塔克
27 0
朝阳39
|
5月前
|
前端开发
Element UI 表格常用改造（表头添加注释、翻页连续序号【内含前端分页】）
Element UI 表格常用改造（表头添加注释、翻页连续序号【内含前端分页】）
朝阳39
220 0
greework
【Word】快速删除多余的不需要的页面/再也不用一页一页的删除了
【Word】快速删除多余的不需要的页面/再也不用一页一页的删除了
greework
171 0
小5聊基础
|
JavaScript 前端开发 程序员
【前端】自定义组件文本框加长度统计
所有交互方法都依赖于jQuery函数库
小5聊基础
92 0
萌狼蓝天
|
C#
【C#】【平时练习】将左边列表框(List)的内容（月份）添加到右边列表框。最终右侧显示的内容（月份）要保持一定顺序
【C#】【平时练习】将左边列表框(List)的内容（月份）添加到右边列表框。最终右侧显示的内容（月份）要保持一定顺序
萌狼蓝天
131 0
【C#】【平时练习】将左边列表框(List)的内容（月份）添加到右边列表框。最终右侧显示的内容（月份）要保持一定顺序
长沙红胖子Qt
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法
长沙红胖子Qt
277 0
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法
明金同学
|
JavaScript
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
明金同学
437 0
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
互联网课堂
|
Web App开发 前端开发 API
遇到表格，手动翻页太麻烦？我教你写脚本，一页展示所有数据
看到这篇文章的人，想必都是互联网用户吧。你们一定遇到过「表格」。 我们在阅读表格时，可能有这种困惑： 表格不支持关键词搜索 表格不支持按照某列排序 表格每页只能展示10条数据，需要不断翻页，才能看完所有内容 怎么办呢？ 如果表格一页能展示所有数据就好了！
互联网课堂
149 0