js之简单分页

简介: js之简单分页

一直以来有许多兄弟问我分页怎么写,我今天就来给大家讲解下分页的简单技巧,不过兄弟们也知道我不怎么喜欢打字,喜欢打代码,话不多说,直接上代码,直接上注释,gogogo!!!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="./js/jquery-3.7.1.js"></script>
    <style>
      .data_content {
        width: 60%;
        margin-left: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: antiquewhite;
      }
 
      .content_box {
        margin: 10px 0;
        padding: 10px;
        border: 1px solid #ccc;
        width: 80%;
        display: flex;
        justify-content: space-around;
      }
 
      .but_page {
        display: flex;
        justify-content: center;
        margin-top: 20px;
      }
 
      .but_page button {
        padding: 8px 16px;
        margin: 0 5px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
      }
 
      .but_page button:hover {
        background-color: royalblue;
      }
 
      .twig {
        line-height: 35px;
        margin-left: 10px;
      }
 
      .page_datas {
        margin-left: 500px;
        margin-top: 15px;
      }
 
      .seek_box {
        text-align: center;
        margin-bottom: 30px;
      }
    </style>
  </head>
  <body>
    <!-- 搜索框 -->
    <div class="seek_box">
      <input type="text" />
      <button>搜索</button>
    </div>
    <!-- 存放数据 -->
    <div class="data_content"></div>
    <!-- 底部页码 -->
    <div class="but_page"></div>
    <!-- 页码跳转和每页数据 -->
    <div class="page_datas">
      <input type="number" class="href_but" />
      <button onclick="buts(-3)">跳转</button>
      <select name="" class="per_page">
        <option value="10">每页10条数据</option>
        <option value="5">每页5条数据</option>
        <option value="15">每页15条数据</option>
      </select>
    </div>
    <script>
      //全局变量
      let data;
      let num = 10; //每页数据
      let k = 0; //第几页
      let k_all; //一共多少页
      // 请求假数据
      $.ajax({
        type: "GET",
        url: "js/new_file.json",
        success: function(res) {
          data = res;
          console.log(data);
          applyColours(0)
        },
      });
 
      // 渲染函数
      function applyColours(dat) {
        k = dat;
        if (k <= 0) {
          k = 0;
        } else if (k >= k_all) {
          k = k_all - 1;
        }
        k_all = Math.ceil(data.length / num); //获取到总共多少页
        //渲染内容
        let str = '';
        for (let i = k * num; i < (k + 1) * num; i++) {
          if (data[i] == undefined) {
            break;
          }
          str += `
          <div class="content_box">
            <div>${data[i].id}</div>
            <div>${data[i].name}</div>
            <div>${data[i].gender}</div>
            <div>${data[i].content}</div>
            <div>${data[i].age}</div>
          </div>`;
        }
        $('.data_content').html(str);
        //渲染按钮
        let std = ``;
        std += `<button onclick="buts(-1)">上一页</button>`
        for (let i = 0; i < k_all; i++) {
          std += `<button onclick="buts(${i})">${i+1}</button>`
        }
        std += `<button onclick="buts(-2)">下一页</button>`
        std += `<div class="twig">共${data.length}条</div>`
        std += `<div class="twig">共${k_all}页</div>`
        std += `<div class="twig">当前第${k+1}页</div>`
        $('.but_page').html(std);
        $(".but_page button").eq(k + 1).css("background-color", "aquamarine")
      }
      // 点击按钮事件
      function buts(datas) {
        if (datas == -1) {
          applyColours(k - 1);
        } else if (datas == -2) {
          applyColours(k + 1);
        } else if (datas == -3) {
          let number_value = $('.href_but').val();
          console.log(number_value);
          applyColours(number_value - 1);
        } else {
          applyColours(datas)
        }
      }
 
      // 每页多少条数据
      $('.per_page').on('change', function() {
        let datas_value = $(this).val();
        console.log(datas_value);
        num = datas_value;
        applyColours(0);
      });
    </script>
  </body>
</html>
目录
相关文章
|
7月前
egg.js 24.13sequelize模型-字段限制排序分页
egg.js 24.13sequelize模型-字段限制排序分页
80 1
egg.js 24.13sequelize模型-字段限制排序分页
|
7月前
|
移动开发 JavaScript 前端开发
分享48个JS分页代码特效,总有一款适合您
分享48个JS分页代码特效,总有一款适合您
74 0
|
7月前
|
JavaScript 前端开发
|
JavaScript
jQuery fullpage.js 全屏分页以及动画使用
jQuery fullpage.js 全屏分页以及动画使用
67 0
|
2月前
|
JavaScript 前端开发
JavaScript分页功能
JavaScript分页功能
|
4月前
|
JavaScript
js分页+搜索
js分页+搜索
48 0
|
5月前
|
JavaScript
js好用的动态分页插件
js好用的动态分页插件是一款简单的分页样式插件,支持样式类型,当前页,每页显示数量,按钮数量,总条数,上一页文字,下一页文字,输入框跳转等功能。
45 1
|
6月前
|
JavaScript
JS实现分页功能
JS实现分页功能
|
6月前
|
JavaScript 前端开发
JS分页功能
JS分页功能
26 0
|
JavaScript 前端开发
【Vue.js】使用ElementUI搭建动态树&数据表格与分页
【Vue.js】使用ElementUI搭建动态树&数据表格与分页
124 0
下一篇
DataWorks