JS简单实现分页显示

最新推荐文章于 2021-06-09 15:54:30 发布
最新推荐文章于 2021-06-09 15:54:30 发布
阅读量941 收藏 3
点赞数 1
原文链接：http://www.cnblogs.com/YooHoeh/p/10426123.html
版权

完整代码源码可以在这里下载

1.在 HTML文件建立列表目标节点和翻页器目标节点

<body>
<!--页面控制器 -->
  <div id="nav"></div>
  <!--列表显示 -->
  <div class="root" id="target"></div>
  <!--导入js-->
  <script src="./test.js"></script>
</body>

2.JS

分页控制器函数封装

/**
 * 
 * @param {列表渲染目标节点} listTarget 
 * @param {页面控制器目标节点} navTarget 
 * @param {列表项渲染函数} renderFunc 
 * @param {每页项数} pageSize 
 * @param {列表数据源} dataSourse 
 */
function renderPageNav(listTarget, navTarget, renderFunc, pageSize, dataSourse) {
  // 总页数
  const pageLength = Math.ceil(dataSourse.length / pageSize);

  //页面控制器
  const pageController = {
    cur: 0,
    toPage: function (index) {
      listTarget.innerHTML = '';
      for (let i = (index - 1) * pageSize; i < index * pageSize; i++) {
        if (dataSourse[i]) {
          listTarget.appendChild(renderFunc(dataSourse[i]));
        } else {
          break;
        }
      }
      this.cur = index;
      console.log(this.cur)
    },
    next: function () { this.toPage(this.cur + 1) },
    prev: function () { this.toPage(this.cur - 1) },
    start: function () { this.toPage(1) },
    end: function () { this.toPage(pageLength) }
  }
  // 页码按钮渲染
  const pageBTN = index => {
    const btn = document.createElement('b');
    btn.innerHTML = index;
    btn.onclick = () => pageController.toPage(index);
    return btn
  };

  // 第一页按钮
  const startBTN = document.createElement('b');
  startBTN.innerHTML = '《';
  startBTN.onclick = () => {
    pageController.start()
  }
  navTarget.appendChild(startBTN)

  // 上一页按钮
  const prevBTN = document.createElement('b');
  prevBTN.innerHTML = '<';
  prevBTN.onclick = () => {
    if (pageController.cur != 1)
      pageController.prev()
  }
  navTarget.appendChild(prevBTN)

  // 页面跳转按钮 
  const page = document.createElement('span');
  for (let i = 1; i <= pageLength; i++) {
    page.appendChild(pageBTN(i))
  }

  navTarget.appendChild(page)

  // 下一页按钮
  const nextBTN = document.createElement('b');
  nextBTN.innerHTML = '>';
  nextBTN.onclick = () => {
    if (pageController.cur != pageLength) {
      pageController.next()
    }
  }
  navTarget.appendChild(nextBTN)
  // 尾页按钮
  const endBTN = document.createElement('b');
  endBTN.innerHTML = '》';
  endBTN.onclick = () => {
    if (pageController.cur != pageLength) {
      pageController.end()
    }
  }
  navTarget.appendChild(endBTN)

}

列表项渲染函数

//渲染单个Item
function renderItem(item) {
  const aItem = document.createElement("div");
  const inner = `<div class='card'>
  <p class="card__text"> ${item.desc} </p>
  </div>`;
  aItem.innerHTML = inner;
  return aItem;
}

// 这里存后台发来的数据
var data = [
  {
    desc: "11111"
  },
  {
    desc: "22222"
  },
  {
    desc: "3333"
  },
  {
    desc: "44444"
  },
  {
    desc: "55555"
  },
  {
    desc: "66666"
  },
  {
    desc: "77777"
  },
  {
    desc: "8888"
  },
  {
    desc: "9999"
  },
  {
    desc: "aaaaa"
  }
];

// 列表渲染目标节点
const listTarget = document.querySelector("#target");
// 导航栏渲染目标节点
const navTarget = document.querySelector("#nav");

运行分页器函数

renderPageNav(listTarget, navTarget, renderItem, 3, data);

转载于:https://www.cnblogs.com/YooHoeh/p/10426123.html

weixin_34186950
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯js分页-用js实现分页显示
01-05
纯js分页,用js将内容以分页的形式展现出来，处理数据更简单
JS实现分页显示
kinglimy的专栏
06-14 6525
1、在设计分页功能时，首先在页面的HTML源代码中添加用于分页的分页脚本，其具体实现的脚本文件如下： //parentName父容器标签名称divName要显示标签的名称 function ShowTagss(parentName, divName) { var childObj = document.getElementById(parentName).childNodes; if
js 分页 显示文章
wem520的专栏
04-08 677
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 var num=1; var nummax=3; function showFy(b){ if(b){ num=num+1;} else{ num=num-1; } for(v
js模仿百度分页，最多显示10页
03-11
模仿百度写的一个分页例子，限制最多显示10页
基于js分页实现（简单）
01-10
使用javacript实现分页技术，简单明了。没有多以的步骤！
使用js实现简单分页
05-27
在JavaScript中，实现分页功能通常分为以下几个步骤： 1. **初始化配置**：设置每页显示的数据量、总数据量以及当前页数。这些参数可以通过HTML元素的属性或者JavaScript对象来传递。 2. **数据处理**：根据当前...
简单实现JSP分页显示效果
10-19
【JSP分页显示效果实现详解】 在网页应用中，数据量较大的情况下，通常需要采用分页显示的方式来...以上就是JSP分页显示的简单实现，实际应用中可能需要考虑更多细节，如优化查询效率、处理边界情况、增加缓存机制等。
js实现简单分页导航栏效果
12-10
本文实例为大家分享了js实现分页导航栏效果的具体代码，供大家参考，具体内容如下 最终的效果:  1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageSize (自己设置) 总页数: ...
JSP实现的简单分页显示效果代码
10-23
总的来说，JSP实现分页显示的关键步骤包括：数据库连接、SQL查询、结果集处理、计算分页信息以及生成分页链接。通过这些步骤，开发者可以构建一个用户友好的分页系统，使得大量数据的浏览变得轻松高效。
Ajax + jQuery + jsRender 实现弹框里的（无刷新）分页
TrZoey的博客
08-09 713
今天要在页面的一个弹框里做一个分页，实现如下。 先看效果： 再上代码： html： &lt;div id="pagination" class="paging_old none" style="height: 40px;line-height: 40px;"&gt; &lt;a href="javascript:;" id=...
PHP简单漂亮的分页类（所有代码都有）
09-06
PHP简单漂亮的分页类 连接数据库，php代码，样式CSS，HTML等代码都有，只要修改下数据名称，表名就可以测试
js实现前端分页页码管理
Cruise的博客
01-18 2636
https://www.cnblogs.com/w-yong/p/6255444.html 本人已经成功实现 分页，有问题欢迎交流，现在做一些补充：一下是我的： 说明一点：当前页和总页数是 用作分页算法的， 当前页和每页多少条数据是用来条用后台查数据的，不要乱 前端页面： &lt;input hidden="hidden" id="pageSize"&gt; &lt;div ...
微信小程序开发：向数组中插入数据
Smallmouse96的博客
05-19 9937
每次请求的数据插入到定义的数组中，之前数据不覆盖 concat(); Page({ data: { content: ['aaa', 'bbb', 'ccc'] }, //监听页面滚动到底部 onReachBottom() { const than = this; this.setData({ content: than.data.content.concat(than.data.content) }) } }) ...
js分页实现，前端实现。
热门推荐
liuzijiang1123的专栏
01-05 4万+
主要是借鉴了网上一个例子，自己重新加了样式，添加了跳转，修改了一些小地方，用于和大家一起分享，前端分页的技巧，表格 的数据是我已经写好了，其实大家也可以前端渲染表格然后再分页，都是可以的。 a{ text-decoration: none; } .table2{ border:#C8C8C8 solid; border-widt
JS实现分页功能—小白专属
m0_46232069的博客
06-19 593
分页功能 先给大家看一下我们要实现出来的效果图???? HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title>
原生JS实现特效导航条
越陌度阡
07-27 1078
分享一个用原生JS实现的特效导航条，效果如下： 实现代码如下： <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>原生JS实现特效导航条</title> <style> body { mar............
js创建分页脚本
dly120219891208的专栏
07-28 1326
//创建分页脚本 //_nPageCount 总页数 _nCurrIndex 当前页 _sPageName页面名 _sPageExt 页面后缀 function createPageHTML(_nPageCount, _nCurrIndex, _sPageName, _sPageExt){ if(_nPageCount == null || _nPageCou
html js实现分页代码,JS实现前端动态分页码代码实例
weixin_31119637的博客
06-09 669
思路分析：有3种情况第一种情况，当前页面curPage < 4第二种情况，当前页面curPage == 4第三种情况，当前页面curPage>4此外，还要考虑，当前页码 curPage < pageTotal(总页码)-2，才显示 ...首先，先是前端的布局样式/*首先，在body中添加div id="pagination" */其次，是css代码*{margin: 0;padd...
html实现分页显示数据代码
最新发布
04-15
以下是一个简单的 HTML 分页显示数据的代码示例： ```html <!DOCTYPE html> <html> <head> <title>分页</title> </head> <body> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody id="data"> <!-- 数据将通过 JavaScript 动态加载 --> </tbody> </table> <div id="pagination"> <!-- 分页按钮将通过 JavaScript 动态添加 --> </div> <script> var currentPage = 1; // 当前页面 var pageSize = 10; // 每页显示的数量 // 模拟的数据 var data = [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 25, gender: '女' }, { name: '王五', age: 30, gender: '男' }, { name: '赵六', age: 35, gender: '女' }, { name: '钱七', age: 40, gender: '男' }, { name: '孙八', age: 45, gender: '女' }, { name: '周九', age: 50, gender: '男' }, { name: '吴十', age: 55, gender: '女' }, { name: '郑十一', age: 60, gender: '男' }, { name: '陈十二', age: 65, gender: '女' }, { name: '黄十三', age: 70, gender: '男' }, { name: '林十四', age: 75, gender: '女' }, { name: '郭十五', age: 80, gender: '男' }, { name: '何十六', age: 85, gender: '女' }, { name: '唐十七', age: 90, gender: '男' }, { name: '许十八', age: 95, gender: '女' }, { name: '冯十九', age: 100, gender: '男' }, { name: '任二十', age: 105, gender: '女' } ]; // 加载指定页数的数据 function loadData(page) { var start = (page - 1) * pageSize; var end = start + pageSize; var html = ''; for (var i = start; i < end && i < data.length; i++) { html += '<tr>'; html += '<td>' + data[i].name + '</td>'; html += '<td>' + data[i].age + '</td>'; html += '<td>' + data[i].gender + '</td>'; html += '</tr>'; } document.getElementById('data').innerHTML = html; } // 初始化分页按钮 function initPagination() { var totalPages = Math.ceil(data.length / pageSize); var html = ''; for (var i = 1; i <= totalPages; i++) { html += '<button onclick="changePage(' + i + ')">' + i + '</button>'; } document.getElementById('pagination').innerHTML = html; } // 切换分页 function changePage(page) { currentPage = page; loadData(currentPage); } // 初始化页面 loadData(currentPage); initPagination(); </script> </body> </html> ``` 该示例中，我们使用了一些简单的 JavaScript 代码来实现分页。我们先定义了一个 `data` 数组，其中包含了 20 条学生信息，然后定义了 `currentPage` 和 `pageSize` 变量来表示当前页码和每页显示的数量。在 `loadData` 函数中，我们通过计算开始和结束索引来加载指定页数的数据，并将其渲染到表格中。在 `initPagination` 函数中，我们通过计算总页数来初始化分页按钮，并在点击按钮时切换分页。最后，在页面加载时，我们调用 `loadData` 和 `initPagination` 函数来初始化页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值