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简单实现分页显示的更多相关文章
- java web 简单的分页显示
题外话:该分页显示是用 “表示层-控制层-DAO层-数据库”的设计思想实现的,有什么需要改进的地方大家提出来,共同学习进步. 思路:首先得在 DAO 对象中提供分页查询的方法,在控制层调用该方法查到指 ...
- jquery ajax json简单的分页，模拟数据，没有封装，只显示原理
简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...
- scroll事件实现监控滚动条并分页显示示例（zepto.js）
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
- js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
- ScrollView图片分页显示-简单
用到的控件: 1>UIScrollView:宽度和图片的宽度一样,因为分页的代码就一句 // 设置分页,这个分页的原理实际上是按照ScrollView的宽进行分页的,这里的图片的宽由于和Scro ...
- 简单的JSP分页显示
1.mysql的limit关键字 (DAO) select * from tablename limit startPoint, numberPerPage; tablename 就是要分页显示的那张 ...
- Js 简单分页（二）
此次使用了http://www.purecss.org/ 的前端Css 效果图 上代码 //更新分页工具栏的效果展示 function updatepagetoolshow(){ //判断当前页 及 ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- JSP分页显示实例（基于Bootstrap）
首先介绍一款简单利落的分页显示利器:bootstrap-paginator 效果截图: GitHub官方下载地址:https://github.com/lyonlai/bootstrap-pagina ...
随机推荐
- Tomcat 日志文件分割
新到公司, 拿到了前辈们留下的 程序 “病历书” , 上面记载了项目上的一些 经常会犯的毛病, 还有相应的解决方法. 其中有的是因为后台 代码逻辑上的一些原因 , N手代码通病了吧 (这个还是以后再 ...
- 分布式监控系统开发【day37】:需求讨论（一）
本节内容 为什么要做监控? 常用监控系统设计讨论 监控需求讨论 如何实现监控服务器的水平扩展? 监控系统架构设计 一.为什么要做监控? 熟悉IT监控系统的设计原理 开发一个简版的类Zabbix监控系统 ...
- golang命令行库cobra使用
github地址:https://github.com/spf13/cobra Cobra功能 简单子命令cli 如 kubectl verion kubectl get 自动识别-h,--h ...
- DTO/DO等POJO对象的使用场景和 orika-mapper 框架的使用
对于项目而言, 我们一般会有DAO->Service->Controller分层设计, 这些层次体现了每层的作用, 而层次之间的数据传递对象设计很少被提及, 下面是一个相对完整的数据转换过 ...
- John von Neumann和Ulam
John von Neumann和Ulam是好朋友,两人经常在一起喝酒.旅行.谈女人.有一次诺伊曼认出身边的一位女士,他们交谈了几句.随后他给Ulam介绍那是他的一位老朋友,刚刚离婚.Ulam就问:那 ...
- java包
首先是java.io java.lang java.util java.lang.math
- keras的网络结构与网络配置
摘自: https://www.cnblogs.com/Anita9002/p/8136357.html Keras的网络配置
- Vue-cli 模拟数据库
vue-cli2.x 版本开发: 新版在build目录下的webpack.dev.conf.js配置本地数据访问: 1,在const portfinder = require(‘portfinder’ ...
- Codeforces Round #449 (Div. 2) D. Ithea Plays With Chtholly
题目链接 交互题. 题意:给你三个数n,m,k.让你完成至多m次互动,每次给你一个q,让你从n个位置选一个位置放这个数,覆盖已经放过的数.让你再m次使得n个位置的数不递减,达到直接退出. 解法:暴力, ...
- js的事件循环机制：同步与异步任务（setTimeout，setInterval）宏任务，微任务（Promise，process.nextTick）
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...