使用JavaScript实现分页效果
应公司需求，有时需要制作静态页面网站，而一旦涉及到文章的分页，实现起来非常麻烦，自己又刚入门，对js不是很熟悉，所以就拿来练练手。
首先页面结构如下，分别展示数据跟分页：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ol, ul {
list-style: none;
}
li {
float:left;
margin:0 10px;
}
ol li {
cursor:pointer;
padding:1px 5px;
background:#eee;
border:1px solid #ccc;
}
ol li.on {
background:#f00;
color:#fff;
border-color:#f00;
}
span {
color:#f00;
}
</style>
</head>
<body>
<ul id="data">
<li>
<img src="1.jpg" alt="服饰 —— 服装模板" />
<h2>服饰 —— 服装模板<span>NO.A001</span></h2>
</li>
<li>
<img src="1.jpg" alt="服饰 —— 服装模板" />
<h2>服饰 —— 服装模板<span>NO.A001</span></h2>
</li>
</ul>
<div style="clear:both;"></div>
<ol id="page">
<li>1</li>
<li>2</li>
</ol> <script src="data.js"></script>
</body>
</html>
在data.js中创建一个数据，用于存储数据：
var dataList = [
{
"_title": "服饰 —— 服装模板",
"_no": "A001",
"_url": "1.jpg"
},
{
"_title": "农业 —— 蔬菜模板",
"_no": "A002",
"_url": "2.jpg"
},
{
"_title": "汽车 —— 轮胎模板",
"_no": "A003",
"_url": "3.jpg"
},
{
"_title": "服饰 —— 服装模板",
"_no": "A004",
"_url": "1.jpg"
},
{
"_title": "农业 —— 蔬菜模板",
"_no": "A005",
"_url": "2.jpg"
},
{
"_title": "汽车 —— 轮胎模板",
"_no": "A006",
"_url": "3.jpg"
},
{
"_title": "服饰 —— 服装模板",
"_no": "A007",
"_url": "1.jpg"
},
{
"_title": "农业 —— 蔬菜模板",
"_no": "A008",
"_url": "2.jpg"
},
{
"_title": "汽车 —— 轮胎模板",
"_no": "A009",
"_url": "3.jpg"
}
];
思路：创建一个对象，对象中设置三个方法：
1、分页导航按钮
2、页面数据展示
3、分页导航按钮点击事件
首先，创建构造函数，分别存储：页面的元素、数组数据、当前页及每页显示多少条数据：
// 获取id
function $$(id) {
return document.getElementById(id);
} // 设置构造函数
function SetData() {
this.elCon = $$("data"); // 页面内容元素
this.elPage = $$("page"); // 分页导航元素
this.data = dataList; // 数据列表
this.i = 0; // 从第几条开始取数据(0代表第一条)
this.strNav = ""; // 存储分页导航选项
this.view = 2; // 默认一页显示多少
}
1、分页导航按钮： 创建原型方法，定义分页函数。先获取数据长度，之后除以每页显示多少条数据，再向上取整 得出分页导航，插入页面中：
// 设置原型方法
SetData.prototype = {
constructor: SetData, // 指向构造函数
// 分页函数
setPageNav: function() {
var len = this.data.length;
for (var i = 0; i < Math.ceil(len/this.view); i++) {
// 设置分页
this.strNav += "<li>"+(i+1)+"</li>";
}
// 插入分页
this.elPage.innerHTML = this.strNav;
this.elPage.getElementsByTagName("li")[0].className = "on";
}
};
2、页面数据展示：取得当前页面加上每页显示条数，得出从哪开始取。 然后循环取出对应数据，加入strHTML变量中，再插入页面
// 页面数据
setPageData: function() {
var num = this.i+this.view,
// 如果超过长度，则获取最后的长度
len = (num < this.data.length) ? num : this.data.length,
strHTML = ""; // 初始化,用于存储内容
// 遍历获取数据并设置当前页面内容
for (this.i; this.i < len; this.i++) {
var _url = this.data[this.i]._url,
_no = this.data[this.i]._no,
_title = this.data[this.i]._title;
// 设置对应的属性及内容
strHTML += "<li>"+
"<img src="+_url+" alt="+_title+" title="+_title+" />"+
"<h2>"+_title+"<span>NO."+_no+"</span></h2>"+
"</li>\r\n";
}
this.elCon.innerHTML = strHTML;
}
3、分页导航按钮点击事件：获取分页按钮，循环绑定事件并在点击时设置当前所在位置 "_self.i = cur * _self.view" , 之后调用页面数据函数，使其重新获取数据
// 设置分页按钮
setBtn: function() {
// 获取分页按钮
var li = this.elPage.getElementsByTagName("li"),
len = li.length,
_self = this; // 保存对象
// 遍历并绑定按钮事件
for (var i = 0; i < len; i++) {
// 闭包绑定
(function(cur) {
li[cur].onclick = function() {
// 移除存在当前类的样式
for (var j = 0; j < len; j++) {
// 使用className 为了兼容IE7以下
if (li[j].getAttribute("class") == "on" || li[j].getAttribute("className") == "on") {
li[j].className = "";
break; // 退出循环
}
}
li[cur].className = "on"; // 设置当前位置
_self.i = cur * _self.view; // 设置当前页
_self.setPageData(); // 调用获取内容行数
}
})(i);
}
}
定义方法之后，实例化对象并调用对应方法往页面插入数据，所有代码如下：
var dataList = [
{
"_title": "服饰 —— 服装模板",
"_no": "A001",
"_url": "1.jpg"
},
{
"_title": "农业 —— 蔬菜模板",
"_no": "A002",
"_url": "2.jpg"
},
{
"_title": "汽车 —— 轮胎模板",
"_no": "A003",
"_url": "3.jpg"
},
{
"_title": "服饰 —— 服装模板",
"_no": "A004",
"_url": "1.jpg"
},
{
"_title": "农业 —— 蔬菜模板",
"_no": "A005",
"_url": "2.jpg"
},
{
"_title": "汽车 —— 轮胎模板",
"_no": "A006",
"_url": "3.jpg"
},
{
"_title": "服饰 —— 服装模板",
"_no": "A007",
"_url": "1.jpg"
},
{
"_title": "农业 —— 蔬菜模板",
"_no": "A008",
"_url": "2.jpg"
},
{
"_title": "汽车 —— 轮胎模板",
"_no": "A009",
"_url": "3.jpg"
}
]; // 获取id
function $$(id) {
return document.getElementById(id);
} // 设置构造函数
function SetData() {
this.elCon = $$("data"); // 页面内容元素
this.elPage = $$("page"); // 分页导航元素
this.data = dataList; // 数据列表
this.i = 0; // 从第几条开始取数据(0代表第一条)
this.strNav = ""; // 存储分页导航选项
this.view = 2; // 默认一页显示多少
}
// 设置原型方法
SetData.prototype = {
constructor: SetData, // 指向构造函数
// 分页函数
setPageNav: function() {
var len = this.data.length;
for (var i = 0; i < Math.ceil(len/this.view); i++) {
// 设置分页
this.strNav += "<li>"+(i+1)+"</li>";
}
// 插入分页
this.elPage.innerHTML = this.strNav;
this.elPage.getElementsByTagName("li")[0].className = "on";
},
// 页面数据
setPageData: function() {
var num = this.i+this.view,
// 如果超过长度，则获取最后的长度
len = (num < this.data.length) ? num : this.data.length,
strHTML = ""; // 初始化,用于存储内容
// 遍历获取数据并设置当前页面内容
for (this.i; this.i < len; this.i++) {
var _url = this.data[this.i]._url,
_no = this.data[this.i]._no,
_title = this.data[this.i]._title;
// 设置对应的属性及内容
strHTML += "<li>"+
"<img src="+_url+" alt="+_title+" title="+_title+" />"+
"<h2>"+_title+"<span>NO."+_no+"</span></h2>"+
"</li>\r\n";
}
this.elCon.innerHTML = strHTML;
},
// 设置分页按钮
setBtn: function() {
// 获取分页按钮
var li = this.elPage.getElementsByTagName("li"),
len = li.length,
_self = this; // 保存对象
// 遍历并绑定按钮事件
for (var i = 0; i < len; i++) {
// 闭包绑定
(function(cur) {
li[cur].onclick = function() {
// 移除存在当前类的样式
for (var j = 0; j < len; j++) {
// 使用className 为了兼容IE7以下
if (li[j].getAttribute("class") == "on" || li[j].getAttribute("className") == "on") {
li[j].className = "";
break; // 退出循环
}
}
li[cur].className = "on"; // 设置当前位置
_self.i = cur * _self.view; // 设置当前页
_self.setPageData(); // 调用获取内容行数
}
})(i);
}
}
}; // 初始化对象
var setData = new SetData();
setData.setPageNav(); // 设置分页导航
setData.setPageData(); // 设置分页内容
setData.setBtn(); // 设置分页按钮
(2014-11-27 11:30 根据指导，学习了一下，重新优化更新代码)
主要更改部分：this.i 为当前页码、点击事件改为事件委托、数据参数为形参传入、初始化函数更改！以下为更改部分：
/*************传参数**************/
function SetData(elCon,elPage,data) {
this.elCon = $$(elCon); // 页面内容元素
this.elPage = $$(elPage); // 分页导航元素
this.data = data; // 数据列表
} /**********当前页码计算***********/
// 获取当前所在页面
var num = this.i*this.view,
// 如果超过长度，则获取最后的长度
len = (num+this.view < this.data.length) ? num+this.view : this.data.length;
// 遍历获取数据并设置当前页面内容
for (var i = num; i < len; i++) { ... } /***********事件委托***********/
// 添加点击事件
this.elPage.onclick = function(ev) {
var ev = ev || window.event,
target = ev.target || ev.srcElement;
// 如果点击的是LI
if (target && target.nodeName === "LI") { ... }
} /***********初始化*************/
init: function() {
this.setPageNav(); // 设置分页导航
this.setPageData(); // 设置分页内容
this.setBtn(); // 设置分页按钮
}
// 初始化对象
var setData = new SetData("data","page",dataList);
setData.init(); // 初始化数据
感谢指导，学习了！ 具体全部更改后代码如下：
var dataList = [
{
"_title": "服饰 —— 服装模板",
"_no": "A001",
"_url": "1.jpg"
},
{
"_title": "农业 —— 蔬菜模板",
"_no": "A002",
"_url": "2.jpg"
},
{
"_title": "汽车 —— 轮胎模板",
"_no": "A003",
"_url": "3.jpg"
},
{
"_title": "服饰 —— 服装模板",
"_no": "A004",
"_url": "1.jpg"
},
{
"_title": "农业 —— 蔬菜模板",
"_no": "A005",
"_url": "2.jpg"
},
{
"_title": "汽车 —— 轮胎模板",
"_no": "A006",
"_url": "3.jpg"
},
{
"_title": "服饰 —— 服装模板",
"_no": "A007",
"_url": "1.jpg"
},
{
"_title": "农业 —— 蔬菜模板",
"_no": "A008",
"_url": "2.jpg"
},
{
"_title": "汽车 —— 轮胎模板",
"_no": "A009",
"_url": "3.jpg"
}
]; // 获取id
function $$(id) {
return document.getElementById(id);
} // 设置构造函数
function SetData(elCon,elPage,data) {
this.elCon = $$(elCon); // 页面内容元素
this.elPage = $$(elPage); // 分页导航元素
this.data = data; // 数据列表
this.strNav = ""; // 存储分页导航选项
this.i = ; // 当前页
this.view = ; // 默认一页显示多少
}
// 设置原型方法
SetData.prototype = {
constructor: SetData, // 指向构造函数
// 分页函数
setPageNav: function() {
var len = this.data.length;
for (var i = ; i < Math.ceil(len/this.view); i++) {
// 设置分页
this.strNav += "<li>"+(i+)+"</li>";
}
// 插入分页
this.elPage.innerHTML = this.strNav;
this.elPage.getElementsByTagName("li")[].className = "on";
},
// 页面数据
setPageData: function() {
// 获取当前所在页面
var num = this.i*this.view,
// 如果超过长度，则获取最后的长度
len = (num+this.view < this.data.length) ? num+this.view : this.data.length,
strHTML = ""; // 初始化,用于存储内容
// 遍历获取数据并设置当前页面内容
for (var i = num; i < len; i++) {
var _url = this.data[i]._url,
_no = this.data[i]._no,
_title = this.data[i]._title;
// 设置对应的属性及内容
strHTML += "<li>"+
"<img src="+_url+" alt="+_title+" title="+_title+" />"+
"<h2>"+_title+"<span>NO."+_no+"</span></h2>"+
"</li>\r\n";
}
this.elCon.innerHTML = strHTML;
},
// 设置分页按钮
setBtn: function() {
// 获取分页按钮
var li = this.elPage.getElementsByTagName("li"),
len = li.length,
_self = this; // 保存对象
// 添加点击事件
this.elPage.onclick = function(ev) {
var ev = ev || window.event,
target = ev.target || ev.srcElement;
// 如果点击的是LI
if (target && target.nodeName === "LI") {
var cur = parseInt(target.innerHTML); // 获取当前点击事件内容
// 遍历内容，移除当前类
for (var j = ; j < len; j++) {
// 使用className 为了兼容IE7以下
if (li[j].getAttribute("class") === "on" || li[j].getAttribute("className") === "on") {
li[j].className = "";
break; // 退出循环
}
}
li[cur-].className = "on"; // 设置当前位置
_self.i = cur-; // 设置当前页
_self.setPageData(); // 调用获取内容函数
}
}
},
// 初始化
init: function() {
this.setPageNav(); // 设置分页导航
this.setPageData(); // 设置分页内容
this.setBtn(); // 设置分页按钮
}
}; // 初始化对象
var setData = new SetData("data","page",dataList);
setData.init(); // 初始化数据
实例访问地址：http://morong.sinaapp.com/page
总结： 刚入门js，实现这个功能从中也学习了一些知识，技术需要不断的积累练习与总结，希望大神对以上代码给予指导！
使用JavaScript实现分页效果的更多相关文章
- 纯原生javascript实现分页效果
随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱. 最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下 functi ...
- 原生javascript实现分页效果+搜索功能
一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要. ...
- 【js】使用javascript 实现静态网页分页效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content-Type" content ...
- 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示 源码下载 各个 ...
- 5种风格的 jQuery 分页效果【附代码】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- 基于jquery 的分页插件，前端实现假分页效果
上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...
随机推荐
- 200. Number of Islands
题目: Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is s ...
- P59、面试题7：用两个栈实现队列
题目:用两个栈实现一个队列.队列声明如下,请实现它的两个函数appendTail和deleteHead,分别完成在队列为插入结点和在队列头部删除结点的功能. stack1专门用于插入数据,stack2 ...
- Java的类演进过程
1.从面向过程到面向对象 在大家最熟悉的C语言中,如果要定义一个复杂的数据类型就用结构体(Struct)来实现,而为结构体的每个操作都定义一个函数,这个函数与结构体本身的定义没有任何关系.程序的重心集 ...
- R语言学习笔记：列表
R列表时以其他对象为成分的有序集合,列表的成分和向量不同,它们不一定是同一种数据类型,模式或者长度.例: > my.list<-list(stud.id=34453, + stud.nam ...
- maven打包源代码sources.jar和javadoc.jar帮助文档
maven中如何打包源代码 *-sources.jar 方式一 : 命令行方式 进入cmd命令行,进入项目工程pom.xml所在路径目录,运行mvn source:jar 和 mvn javado ...
- LeetCode Same Tree （判断相同树）
题意:如题 思路:递归解决,同判断对称树的原理差不多.先保证当前两个结点是相等的,再递归保证两左结点是相等的,再递归保证右结点是相等的. /** * Definition for a binary t ...
- sql null值
SQL Server 提供 SET CONCAT_NULL_YIELDS_NULL { ON | OFF } 来控制 null 与其它字符串连接的行为. 当 SET CONCAT_NULL_YIELD ...
- 自定义SharePoint列表新增、编辑、查看页面（NewForm、EditForm、DispForm）
转:http://blog.csdn.net/lance_lot1/article/details/7966571 在项目中,用户需求涉及在一个列表录入项目信息,选择一个项目后,与该项目相关的信息实现 ...
- java jvm学习笔记四（安全管理器）
欢迎装载请说明出处:http://blog.csdn.net/yfqnihao 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一 ...
- 树莓PI交叉编译BOOST库（asio网络例子）
环境搭建参考上一篇文章[http://www.cnblogs.com/yuliyang/p/4023758.html] 客户端(use boost.asio on raspberry pi )clie ...