关于一个分页功能，没有思路了，想请教。

phoenix-sky 社区高级成员 T9 2021-05-23 09:27:47
参考网上代码实现一个基本的分页功能，没有完全实现，没有更好的思路了，在这里请教大家。
1：目前显示所有页数，应该一次只显示[1,2,3,4,5] [6,7,8,9,10] [11,12,13,14,15] 这样的分页；
2：JS 哪些部分该改进？

谢谢！
下面是全部代码
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Go Coding!</title>

  <style>

    * {

      margin: 0;

      padding: 0;

      border: none;

      list-style: none;

      text-decoration: none;

      font-size: 12px;

    }



    body {

      padding: 20px;

    }



    .title {

      font-size: 16px;

      color: #f80;

    }



    .list>li {

      padding: 6px;

      border-bottom: 1px solid #eee;

    }



    .pagination {

      padding: 4px;

    }



    .pagination a {

      display: inline-block;

      padding: 4px;

      margin: 0 4px 0 0;

      color: #00c;

    }

  </style>

</head>

<body>

  <ul class="list"></ul>

  <section class="pagination"></section>

  <script>

    let data = {

      "list": [

        { "id": 1, "title": 2001 },

        { "id": 2, "title": 2002 },

        { "id": 3, "title": 2003 },

        { "id": 4, "title": 2004 },

        { "id": 5, "title": 2005 },

        { "id": 6, "title": 2006 },

        { "id": 7, "title": 2007 },

        { "id": 8, "title": 2008 },

        { "id": 9, "title": 2009 },

        { "id": 10, "title": 2010 },

        { "id": 11, "title": 2011 },

        { "id": 12, "title": 2012 },

        { "id": 13, "title": 2013 },

        { "id": 14, "title": 2014 },

        { "id": 15, "title": 2015 },

        { "id": 16, "title": 2016 },

      ]

    }



    let list = data.list;

    console.log(`list-length: ${list.length}`);



    pagination({

      "current-page": 1,

      "page-size": 5,

    });



    function pagination(par) {

      let listBox = document.querySelector(".list");

      let num = data.list.length;

      let totalPage = 0;

      let pageSize = par["page-size"];

      let currentPage = par["current-page"];



      if (num / pageSize > parseInt(num / pageSize)) {

        totalPage = parseInt(num / pageSize) + 1;

      } else {

        totalPage = parseInt(num / pageSize);

      }



      let sliceStart = (currentPage - 1) * pageSize;

      let sliceEnd = currentPage * pageSize;

      sliceEnd = sliceEnd > num ? num : sliceEnd;



      let dataSlice = data.list.slice(sliceStart, sliceEnd);

      let listText = "";

      for (let item of dataSlice) {

        listText += `

          <li><h5 class="title">${item.id} - ${item.title}</h5></li>

        `;

      }

      listBox.innerHTML = listText;



      let htmlText = "";

      if (currentPage > 1) {

        htmlText += `

          <a href="#" onClick="pagination({'current-page': ${currentPage - 1}, 'page-size': ${pageSize}})">

            上一页

          </a>

        `;

      }



      for (let i = 1; i < totalPage + 1; i++) {

        htmlText += `

          <a href="#" onClick="pagination({'current-page': ${i}, 'page-size': ${pageSize}})">

            ${i} 

          </a>

        `;

      }



      if (currentPage < totalPage) {

        htmlText += `

          <a href="#" onClick="pagination({'current-page': ${currentPage + 1}, 'page-size': ${pageSize}})">

            下一页

          </a>

        `;

      }



      let pagination = document.querySelector(".pagination");

      pagination.innerHTML = htmlText;

    }

  </script>

</body>

</html>
...全文
35797 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
路遥知马力y 2023-03-16
  • 打赏
  • 举报
 回复 1 

function pagination(par) {
  let listBox = document.querySelector(".list");
  let num = data.list.length;
  let totalPage = 0;
  let pageSize = par["page-size"] || 5; // 默认每页显示 5 条数据
  let currentPage = par["current-page"] || 1; // 默认显示第一页
  ...
}


if (currentPage > 1) {
  htmlText += `
    <a href="#" onClick="pagination({'current-page': ${currentPage - 1}, 'page-size': ${pageSize}})">
      上一页
    </a>
  `;
}

for (let i = 1; i < totalPage + 1; i++) {
  htmlText += `
    <a href="#" onClick="pagination({'current-page': ${i}, 'page-size': ${pageSize}})">
      ${i} 
    </a>
  `;
}

if (currentPage < totalPage) {
  htmlText += `
    <a href="#" onClick="pagination({'current-page': ${currentPage + 1}, 'page-size': ${pageSize}})">
      下一页
    </a>
  `;
}



let sliceStart = (currentPage - 1) * pageSize;
let sliceEnd = currentPage * pageSize;
sliceEnd = sliceEnd > num ? num : sliceEnd;

let dataSlice = data.list.slice(sliceStart, sliceEnd);
let listText = "";
for (let item of dataSlice) {
  listText += `
    <li><h5 class="title">${item.id} - ${item.title}</h5></li>
  `;
}
listBox.innerHTML = listText;
1eeMamas 2021-10-07
  • 打赏
  • 举报
 回复

https://blog.csdn.net/kkLeung/article/details/104701681
N年前的笔记，后端python django +前端的分页。
定义分页的类，可以查考！！

xiaoxiangqing 2021-05-26
  • 打赏
  • 举报
 回复
数据只能通过服务器分页去获取吧
phoenix-sky 社区高级成员 T9 2021-05-26
  • 打赏
  • 举报
 回复
引用 11 楼 xiaoxiangqing 的回复:
数据只能通过服务器分页去获取吧
为了测试分页功能，模拟的。
phoenix-sky 社区高级成员 T9 2021-05-25
  • 打赏
  • 举报
 回复
引用 8 楼 gqkmiss 的回复：
[quote=引用 7 楼 phoenix.sky 的回复:][quote=引用 5 楼 gqkmiss 的回复:]1、当前页码数高亮 2、可以选择一页多少个 3、当页码数超过一定量时怎么显示（100页、200页这种） 4、可以跳转某一页 5、只有一页时隐藏分页功能
您好， 3、当页码数超过一定量时怎么显示（100页、200页这种） 该如何修改代码？ 谢谢！[/quote] 思路：比如100页的时候，展示1、2、3 ... 98、99、100；按照这种情况展示。[/quote]代码如何实现？谢谢！
gqkmiss 2021-05-25
  • 打赏
  • 举报
 回复
引用 7 楼 phoenix.sky 的回复:
[quote=引用 5 楼 gqkmiss 的回复:]1、当前页码数高亮 2、可以选择一页多少个 3、当页码数超过一定量时怎么显示（100页、200页这种） 4、可以跳转某一页 5、只有一页时隐藏分页功能
您好， 3、当页码数超过一定量时怎么显示（100页、200页这种） 该如何修改代码？ 谢谢！[/quote] 思路：比如100页的时候，展示1、2、3 ... 98、99、100；按照这种情况展示。
phoenix-sky 社区高级成员 T9 2021-05-25
  • 打赏
  • 举报
 回复
引用 5 楼 gqkmiss 的回复:
1、当前页码数高亮 2、可以选择一页多少个 3、当页码数超过一定量时怎么显示（100页、200页这种） 4、可以跳转某一页 5、只有一页时隐藏分页功能
您好， 3、当页码数超过一定量时怎么显示（100页、200页这种） 该如何修改代码？ 谢谢！
泡泡鱼_ 2021-05-25
  • 打赏
  • 举报
 回复
引用 4 楼 phoenix.sky 的回复:
[quote=引用 1 楼 泡泡鱼_ 的回复:]你少了一个参数：默认显示几个页码，比如是nums，默认5。然后for生成页码时根据这个当前页码和这个参数nums去生成。然后注意页码的边界修正
您好， 我修改了代码，但是分页功能出现错误。这段代码该如何修改？ 谢谢！ 
for (let i = 1; i < totalPage + 1; i++) {
  htmlText += `
    <a class="item-link" href="#" onClick="pagination({'current-page': ${i}, 'page-size': ${pageSize}})">
      ${i} 
    </a>
  `;
}
[/quote] 就是计算呀，得出for中i的范围呀……大概下面这样子的意思吧 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Go Coding!</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        border: none;
        list-style: none;
        text-decoration: none;
        font-size: 12px;
      }

      body {
        padding: 20px;
      }

      .title {
        font-size: 16px;
        color: #f80;
      }

      .list > li {
        padding: 6px;
        border-bottom: 1px solid #eee;
      }

      .pagination {
        padding: 4px;
      }

      .pagination a {
        display: inline-block;
        padding: 4px;
        margin: 0 4px 0 0;
        color: #00c;
      }
      .pagination a.curr {
        display: inline-block;
        padding: 4px;
        margin: 0 4px 0 0;
        background-color: #000;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <ul class="list"></ul>
    <section class="pagination"></section>
    <script>
      let data = {
        list: [
          { id: 1, title: 2001 },
          { id: 2, title: 2002 },
          { id: 3, title: 2003 },
          { id: 4, title: 2004 },
          { id: 5, title: 2005 },
          { id: 6, title: 2006 },
          { id: 7, title: 2007 },
          { id: 8, title: 2008 },
          { id: 9, title: 2009 },
          { id: 10, title: 2010 },
          { id: 11, title: 2011 },
          { id: 12, title: 2012 },
          { id: 13, title: 2013 },
          { id: 14, title: 2014 },
          { id: 15, title: 2015 },
          { id: 16, title: 2016 },
          { id: 1, title: 2001 },
          { id: 2, title: 2002 },
          { id: 3, title: 2003 },
          { id: 4, title: 2004 },
          { id: 5, title: 2005 },
          { id: 6, title: 2006 },
          { id: 7, title: 2007 },
          { id: 8, title: 2008 },
          { id: 9, title: 2009 },
          { id: 10, title: 2010 },
          { id: 11, title: 2011 },
          { id: 12, title: 2012 },
          { id: 13, title: 2013 },
          { id: 14, title: 2014 },
          { id: 15, title: 2015 },
          { id: 16, title: 2016 },
        ],
      }

      let list = data.list
      console.log(`list-length: ${list.length}`)

      pagination({
        current: 1,
        size: 5,
        nums: 5,
      })

      function pagination(config) {
        let listBox = document.querySelector(".list")
        let num = data.list.length
        let totalPage = 0
        let pageSize = config.size
        let currentPage = config.current
        let nums = config.nums || 5
        if (num / pageSize > parseInt(num / pageSize)) {
          totalPage = parseInt(num / pageSize) + 1
        } else {
          totalPage = parseInt(num / pageSize)
        }

        let sliceStart = (currentPage - 1) * pageSize
        let sliceEnd = currentPage * pageSize
        sliceEnd = sliceEnd > num ? num : sliceEnd

        let dataSlice = data.list.slice(sliceStart, sliceEnd)
        let listText = ""
        for (let item of dataSlice) {
          listText += `
          <li><h5 class="title">${item.id} - ${item.title}</h5></li>
        `
        }
        listBox.innerHTML = listText

        let htmlText = ""
        if (currentPage > 1) {
          htmlText += `
          <a href="#" onClick="pagination({current: ${
            currentPage - 1
          }, size: ${pageSize},nums:${nums}})">
            上一页
          </a>
        `
        }

        let start = currentPage - Math.floor(nums / 2)
        let end = currentPage + Math.floor(nums / 2)
        //保证有nums个页码在显示
        end < nums && (end = nums)
        //最大页码修正
        end > totalPage && (end = totalPage)
        //保证有nums个页码在显示
        end - start != nums - 1 && (start = end - nums + 1)
        //最小页码修正
        start < 1 && (start = 1)

        for (let i = start; i <= end; i++) {
          htmlText += `
          <a href="#" ${
            i === currentPage ? 'class="curr"' : ""
          } onClick="pagination({current: ${i}, size: ${pageSize},nums:${nums}})">
            ${i} 
          </a>
        `
        }

        if (currentPage < totalPage) {
          htmlText += `
          <a href="#" onClick="pagination({current: ${
            currentPage + 1
          }, size: ${pageSize},nums:${nums}})">
            下一页
          </a>
        `
        }

        let pagination = document.querySelector(".pagination")
        pagination.innerHTML = htmlText
      }
    </script>
  </body>
</html>
gqkmiss 2021-05-25
  • 打赏
  • 举报
 回复
1、当前页码数高亮 2、可以选择一页多少个 3、当页码数超过一定量时怎么显示（100页、200页这种） 4、可以跳转某一页 5、只有一页时隐藏分页功能
phoenix-sky 社区高级成员 T9 2021-05-25
  • 打赏
  • 举报
 回复
引用 1 楼 泡泡鱼_ 的回复:
你少了一个参数：默认显示几个页码，比如是nums，默认5。然后for生成页码时根据这个当前页码和这个参数nums去生成。然后注意页码的边界修正
您好， 我修改了代码，但是分页功能出现错误。这段代码该如何修改？ 谢谢！ 
for (let i = 1; i < totalPage + 1; i++) {
  htmlText += `
    <a class="item-link" href="#" onClick="pagination({'current-page': ${i}, 'page-size': ${pageSize}})">
      ${i} 
    </a>
  `;
}
xiaosouyi 2021-05-25
  • 打赏
  • 举报
 回复
感觉像看天书
phoenix-sky 社区高级成员 T9 2021-05-24
  • 打赏
  • 举报
 回复
引用 2 楼 泡泡鱼_ 的回复:
而且一般翻页也不是像你说的那个每五个一组的显示的。大多是保证当前页在页码列表的中间
明白，我先修改代码，谢谢！
泡泡鱼_ 2021-05-24
  • 打赏
  • 举报
 回复
而且一般翻页也不是像你说的那个每五个一组的显示的。大多是保证当前页在页码列表的中间
泡泡鱼_ 2021-05-24
  • 打赏
  • 举报
 回复
你少了一个参数：默认显示几个页码，比如是nums，默认5。然后for生成页码时根据这个当前页码和这个参数nums去生成。然后注意页码的边界修正
asp网站制作说明书
通过设计和实现一个多页面、功能完备的个人网站，学生能够将理论知识转化为实际操作技能，同时增强网页设计的审美和用户体验意识。 具体要求包括但不限于： - **网站规划**：至少包含五个页面，如首页、个人介绍、...
上海交通大学软件学院_操作系统课程_实验内含源码和运行说明书.zip
"doc"文件夹可能包含了关于实验的详细文档，如理论背景、设计思路、代码解释等。这些文档可能是PDF或Word格式，帮助学生理解和分析源代码，以及如何运行和调试程序。文档中可能会涉及操作系统的核心概念，如进程管理...
DWZ (JUI) 教程 一个页面多Table多分页的问题
 如题，我想请教一下，一个页面有多个table，多个pagination，一个pagerForm。这种情况下怎么解决多个pagination不同pagenum的问题呢？希望您帮忙给个思路就行，非常 感谢！ 如果是这样的滴话，使用局部刷新...
vue+element实现分页及条件搜索功能(纯前端分页)
学习vue+element做用户...ps：(table :data 直接使用 list整个对象赋值，纯前端分页功能实现) <div id="user"> 1. <el-table :data="userInfo.slice((currentPage-1)*pageSize,currentPage*pageSize)" ...
php分页json,php 分页 json
场景：请教PHP生成JSON分页有关问题请问PHP生成JSON分页问题最近在搞生成PHP生成JSON，想实现分页，下边代码已能把数组生成了，分页要怎实现了？想实现每10条分一次页//connectioninformation$host="XXX";$user="XXX...
JavaScript

87,995

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章