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 ...
随机推荐
- request对象的方法及其参数的传递
先设计一个简单的登录界面index.htm: <html><head><title>request的使用</title></head>< ...
- JQuery 的遍历方法 $.each
博主呢最近在公司实习,发现公司基本上都会统一代码风格,今天看到还有很多事用JQuery写的js 请求Ajax与后台进行数据交互的方式 当我看到$each 遍历时 然我想起我学JQuery的时候 于是复 ...
- 第二节: 比较EF的Lambda查询和Linq查询写法的区别
简介 在前面EF的介绍中,曾多次提到过EF可以使用Lambda和Linq来完成对数据库的访问,这两种的语法的具体使用和注意事项在前面的DotNet进阶的系列章节中已经详细介绍过了,本次借着EF章节,重 ...
- 第四节：框架前期准备篇之进程外Session的两种配置方式
一. 基本介绍 1. 背景:Asp.Net默认的Session机制是进程内,存储在服务器端内存中,有这么几个缺点: ①:既然存在内存中,空间有限,不能存储大数据量信息,数据量多的话Session会被挤 ...
- python的os.system函数的应用
os的system原理 system函数可以将字符串转化成命令在服务器上运行:其原理是每一条system函数执行时,其会创建一个子进程在系统上执行命令行,子进程的执行结果无法影响主进程 上述原理会导致 ...
- Vue-cli 模拟数据库
vue-cli2.x 版本开发: 新版在build目录下的webpack.dev.conf.js配置本地数据访问: 1,在const portfinder = require(‘portfinder’ ...
- hinernate-实体对象的3种状态
瞬时状态---持久化状态---游离态 瞬时状态:实体对象中没有id,没有与session关联 持久化状态:实体对象中有id,与session有关联 游离态:实体对象中有id,没有与session关联 ...
- CapsNet胶囊网络（理解）
0 - 背景 Geoffrey Hinton是深度学习的开创者之一,反向传播等神经网络经典算法发明人,他在去年年底和他的团队发表了两篇论文,介绍了一种全新的神经网络,这种网络基于一种称为胶囊(caps ...
- C#基础零碎知识点摘录
1.类分为静态类个非静态类(实例类) 静态类不能创建对象,使用方法时,直接类名.方法名(),常用的静态类有Console类 实例类:创建对象时通过对象调用类的方法 2.当我们声明一个类成员为静态时,意 ...
- 使用Python进行OCR -- 识别图片中的文字
工具 Tesseract pytesseract tesserocr 朋友需要一个工具,将图片中的文字提取出来.我帮他在网上找了一些OCR的应用,都不好用.所以准备自己研究,写一个Web APP供他使 ...