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 ...
随机推荐
- python的内置模块xml模块方法 xml解析 详解以及使用
一.XML介绍 xml是实现不同语言或程序直接进行数据交换的协议,跟json差不多,单json使用起来更简单,不过现在还有很多传统公司的接口主要还是xml xml跟html都属于是标签语言 我们主要学 ...
- Spark源码剖析 - SparkContext的初始化(一)
1. SparkContext概述 注意:SparkContext的初始化剖析是基于Spark2.1.0版本的 Spark Driver用于提交用户应用程序,实际可以看作Spark的客户端.了解Spa ...
- JN_0005：PS改变图片指定内容颜色
1,打开图片. 2,选择选区,抽取出独立图存 选中选区,按ctrl + alt + j ,抽取图层. 3,选中图层,再按住 ctrl,点击图层图标 的白色选区处,即可选中图层中的内容. 4,选中图层内 ...
- 第二节. SignalR开篇以及如何指定传输协议
一. 声明 该节主要介绍SignalR的一些理论知识,代码量很小,在后续章节编写中,会不断回来更新该节,完善该节的介绍:待该系列结束时,该节会和目录章节合并. 下面的理论介绍相对枯燥,但对于后面的理解 ...
- 数据结构Java实现04---树及其相关操作
首先什么是树结构? 树是一种描述非线性层次关系的数据结构,树是n个数据结点的集合,这些集结点包含一个根节点,根节点下有着互相不交叉的子集合,这些子集合便是根节点的子树. 树的特点 在一个树结构中,有且 ...
- C++实现递归版二分搜索算法
无聊撸了一个,没啥技术含量,别吐槽.. #include <iostream> using namespace std; int BinarySearch(int* nums,int ke ...
- artDialog记录
//在子页面加按钮的方式 var api = frameElement.api, W = api.opener; api.button({ id: 'valueOk', name: '确定', cal ...
- thinkphp 5.6以上版本出现No input file specified解决办法
打开thinkphp,出现No input file specified. 解决方法:在工程下的.htaccess文件里, 把RewriteRule ^(.*)$ index.php/$1 [QSA, ...
- IP、端口及远程服务器
- 边缘检测之Canny
1. 写在前面 最近在做边缘检测方面的一些工作,在网络上也找了很多有用的资料,感谢那些积极分享知识的先辈们,自己在理解Canny边缘检测算法的过程中也走了一些弯路,在编程实现的过程中,也遇到了一个让我 ...