使用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框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...
随机推荐
- Android 设定activity的进入和退出效果
看了android的源代码和资源文件,终于明白如何去修改设置Dialog和Activity的进入和退出效果了.设置Dialog首先通过 getWindow()方法获取它的窗口,然后通过getAttri ...
- Android view的requestLayout()
public void requestLayout () Since: API Level 1 Call this when something has changed which has inval ...
- 列出man手册所有函数的方法
locate /man7/|sed -r 's#.*/([^/]+).7.gz$#\1#' locate /man7/ | xargs basename -a -s '.7.gz' apropos - ...
- 【HDOJ】4336 Card Collector
概率DP的题目,一直就不会做这类题目.dp[s]表示状态为s的时候再买多少张牌可以买全,表示的是一个期望值.dp[s] = 1 + P(empty) * dp[s] + P(had) * dp[s] ...
- Android开发之在子线程中使用Toast
在子线程中使用Toast的时候,出现Force close. 错误提示:Can't create handler inside thread that has not called Looper.pr ...
- php discuz框架接口不能正常访问的问题
本人php小白,无php编程基础,直接上php服务器部署,后果很严重.....所以务必看完请给”顶“给评论,以表示对小白的鼓励和赞赏! 关于discuz框架,独自加班,废寝忘食,然已无力吐槽..... ...
- BZOJ3175: [Tjoi2013]攻击装置
题解: 最大点独立集...好像水过头了... 不过发现我二分图好像忘完了!!! 代码: #include<cstdio> #include<cstdlib> #include& ...
- [.NET WebAPI系列01] WebAPI 简单例子
[源] 来自微软WebAPI官方视频,Introduction to the ASP.NET Web API --Uniform Interface -- Demo-Using convention ...
- mysql_insert_id 为什么会返回空值
如果同时打开了一个以上的数据库资源,如果其中一个资源,没有使用insert语句或没有auto_increment类型的数据,或返回结果恰好为空值时,会导致mysql_insert_id()返回空值. ...
- (四)学习MVC之修改个人资料和身份验证登陆
1.修改资料不用建立模型,直接在UserControl.cs添加 ChangeInfo(): #region 修改用户资料 [UserAuthorize] public ActionResult Ch ...