使用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框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...
随机推荐
- HTML DOM与XML DOM之间，既有区别
http://kb.cnblogs.com/page/74971/ HTML文档可以使用Core API和HTML API两者: 而XML文档只能使用Core API. 换句话说,HTML与XML重叠 ...
- 分布式java应用
大型应用,通常会拆分为多个子系统来实现. 对Java来说,这些子系统可能部署在同一台机器的多个不同的JVM中,也可能部署在不同的机器上,但这些子系统又不是完全独立的,要相互通信来共同实现业 ...
- jquery的smartWizard插件使用方法
jquery 的smartWizard插件常用在一些向导式的,按步骤的功能中,是的用户按照我们设定的步骤进行操作,这样一方面有较好的用户体验,可以将庞大的表格 数据分解成多个步骤,是的每个步骤的数据量 ...
- Vim Gtags插件
01.Gtags func:查看定义处 02.Gtags -r func:查看引用处 03.Gtags -s text:查看未被数据库定义的tags 04.copen:打开quick fix显示窗口 ...
- tar 命令打包，除了某个目录剩下的都打包
tar czvf beifen.tar.gz ./webdata --exclude webdata/uploadfiles
- 【Struts】strust.xml中<result type="">所有类型详解
在默认时,<result>标签的type属性值是“dispatcher”(实际上就是转发,forward).开发人员可以根据自己的需要指定不同的类型,如redirect.stream等.如 ...
- 【转】编译Android系统源码和内核源码
原文网址:http://blog.csdn.net/jiangwei0910410003/article/details/37988637 好长时间没有写blog了,之所以没有写,主要还是工作上的事, ...
- C# 网页图片爬虫的几种技术基础
一.文件流方式获取网络图片资源 方法1 , ); System.Net.WebRequest webreq = System.Net.WebRequest.Create(url); System.Ne ...
- CF 55D - Beautiful numbers（数位DP）
题意: 如果一个数能被自己各个位的数字整除,那么它就叫 Beautiful numbers.求区间 [a,b] 中 Beautiful numbers 的个数. 分析:先分析出,2~9 的最大的最小公 ...
- oracle spfile和pfile文件
pfile(Parameter File)从oracle8i开始使用,在oracle9i中也可以用.它以文本文件的形式存在,可以用vi等编辑器对 其中数据库参数进行修改.文件格式为initSID.or ...