JS简单实现分页显示

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

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);

JS简单实现分页显示相关推荐

js简单文字滚动显示
js简单文字滚动显示 1. html内容 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
java程序设计与j2ee中间件技术/软件开发技术(III)-大作业-采用MVC模式实现商品信息的查询显示（可以模糊查询）、增加和删除功能，商品表自拟，实现简单菜单操作和分页显示
目录 1.题目说明 2.实验设计 2.1 表设计 2.2 工程结构 3.运行界面截图与说明 4.小结附录:源代码 src/main/java src/main/java/bean Goods.jav ...
scroll事件实现监控滚动条并分页显示示例（zepto.js）
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
使用JS动态生成表格数据和分页显示
根据录入的内容动态显示到页面,不需要通过数据库保存,这样子减轻服务器压力.同时如果数据过多,支持分页显示,这些数据到保存时可以一起提交到后台. 效果如下: js代码(要引入JQuery): <! ...
简单的JSP分页显示
1.mysql的limit关键字 (DAO) select * from tablename limit startPoint, numberPerPage; tablename 就是要分页显示的那张 ...
Vue.js读取本地json文件并分页显示
Vue.js读取本地json文件并分页显示 1.功能实现通过axios异步加载技术读取本地的json文件内容,并通过vue.js处理数据在h5页面分页显示(这里以3行数据分页) 2.student. ...
Struts2+Hibernate分页显示实例
下面是一个struts2+hibernate的分页显示,主要是用到了hibernate的相应分页方法大大简单了分页的代码版本:Struts2.1.8 Hibernate3.2 Oracle9g 具体 ...
vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...
js实现关于分页的一种实现方式
项目中用到列表的地方很多,二页面列表的显示必然要求分页, 所以分页和查询几乎密不可分,如果说你不会分页查询数据, 那你基本上还属于菜鸟. 分页的原理很简单,从sql上看就是从哪一条开始,往后差几条. ...
基于Vue.js的表格分页组件
转载自基于Vue.js的表格分页组件有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...

JS简单实现分页显示

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

2.JS

分页控制器函数封装

列表项渲染函数

运行分页器函数

JS简单实现分页显示相关推荐

最新文章

热门文章