分页插件开发
1、分页插件的使用
<script>./分页插件.js</script>
<script>
pagFactory({
data : datas, datas是页面数据源
fbox : fboxs， 渲染分页按钮的大盒子
dataBox ：dataBoxs, 渲染数据的大盒子
})
</script>
2、分页插件的参数
通常以表格的形式：
| 参数 | 参数表示的意义 |
|---|---|
| data |
|
| fbox |
|
| dataBox |
|
| itemNum | 数字类型，设置一页展示多少条数据，默认值为10 |
| pagNum | 数字类型，设置一次展示分页按钮，默认值为5 |
| bgColor | 按钮的背景颜色,默认为白色 |
| onBgColor | 按钮选中的背景颜色,选中为天蓝色 |
| fontColor | 按钮文字颜色,默认为黑色 |
| onFontColor | 按钮选中文字颜色,默认为白色 |
| onBorderColor | 边框选中颜色,默认为天蓝色 |
callback : 函数有参数 data
代表当前渲染的第n条数据
根据这个数据用户自定义页面数据展示结构
-
应用分页插件实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/分页插件.js"></script>
</head>
<body>
//储存数据的父盒子
<div id="dataBox"></div>
//储存分页按钮的父盒子
<div class="page"></div>
</body>
<script>
var datas = [];
for(var i = 0; i < 108; i++){
var obj = {
num : i,
}
datas[i] = obj;
}
//datas就是生成的数据源
console.log(datas);
//引用分页插件函数
pagFactory({
data : datas,
//数据盒子
dataBox : document.getElementById('dataBox'),
itemNum : 10,
pagNum : 5,
// 分页按钮和上一页、下一页按钮的大盒子
fbox : document.getElementsByClassName('page')[0],
callback : function(data){
// console.log(data);
var div = document.createElement('div');
div.innerText = data.num;
dataBox.appendChild(div)
}
})
</script>
</html>
-
js代码实例
//1、先定义一个工厂函数
//obj 以对象的形式传参
function pagFactory(objs) {
//将所有的参数以对象的形式传入
//2、封装一个 分页框架的类
function Pag(obj) {
//数据源
this.data = obj.data;
//渲染分页组件的父盒子
this.fbox = obj.fbox;
//渲染数据的大盒子
this.dataBox = obj.dataBox;
//每页展示多少条数据
this.itemNum = obj.itemNum || 10;
//按钮的数量 默认有5个按钮
this.pagNum = obj.pagNum || 5;
//当前展示第几页
this.showNum = 1;
//当前分页按钮中，第一个按钮是多少
this.nowNum = 1;
//上一页按钮默认的背景颜色 默认为白色
this.bgc = obj.bgColor || '#fff';
//上一页按钮选中的背景颜色 选中为天蓝色
this.onbgc = obj.onBgColor || '#007aff';
//按钮文字默认颜色 默认为黑色
this.ftc = obj.fontColor || 'black';
//按钮选中文字颜色 默认为白色
this.onftc = obj.onFontColor || '#fff';
//边框默认颜色 默认为黑色
this.bdc = obj.borderColor || 'black';
//边框选中颜色 默认为天蓝色
this.onbdc = obj.onBorderColor || '#007aff';
}
//3、渲染页面框架
Pag.prototype.createPag = function () {
//由于页面数据的渲染方法不确定，所以先不写
//设置分页按钮和翻页按钮的框架
var div = document.createElement('div');
div.className = 'pag';
div.style.textAlign = 'center';
div.style.fontSize = '0px';
//将这个大盒子pag添加到fbox中
this.fbox.appendChild(div);
//设置上一页按钮
var prev = document.createElement('div');
prev.className = 'prev';
prev.id = 'prev';
//设置样式
prev.style.display = 'inline-block';
prev.style.fontSize = '16px';
prev.style.verticalAlign = 'top';
prev.style.width = '80px';
prev.style.height = '30px';
prev.style.lineHeight = '30px';
prev.style.cursor = 'pointer';
prev.style.borderRadius = '3px';
prev.style.transition = '0.7s';
//取消用户选中
prev.style.userSelect = 'none';
prev.style.backgroundColor = this.bgc;
prev.style.color = this.ftc;
prev.style.border = `1px solid ${this.bdc}`;
prev.innerText = '上一页';
//将上一页按钮添加到上面的盒子中
div.appendChild(prev);
//渲染分页按钮大盒子
var pags = document.createElement('div');
pags.className = 'pags';
pags.id = 'pags';
//设置样式
pags.style.display = 'inline-block';
pags.style.verticalAlign = 'top';
pags.style.margin = '0px 10px';
//将分页按钮大盒子添加到上面的盒子中
div.appendChild(pags);
//设置下一页按钮
var next = document.createElement('div');
next.className = 'next';
next.id = 'next';
//设置样式
next.style.display = 'inline-block';
next.style.fontSize = '16px';
next.style.verticalAlign = 'top';
next.style.width = '80px';
next.style.height = '30px';
next.style.lineHeight = '30px';
next.style.cursor = 'pointer';
next.style.borderRadius = '3px';
next.style.transition = '0.7s';
//取消用户选中
next.style.userSelect = 'none';
next.style.backgroundColor = this.bgc;
next.style.color = this.ftc;
next.style.border = `1px solid ${this.bdc}`;
next.innerText = '下一页';
//将下一页按钮添加到上面的盒子中
div.appendChild(next);
//上一页鼠标移入
prev.onmouseenter = function () {
onCol(this)
}
//上一页鼠标移出
prev.onmouseleave = function () {
col(this)
}
//下一页鼠标移入
next.onmouseenter = function () {
onCol(this)
}
//下一页鼠标移出
next.onmouseleave = function () {
col(this)
}
var that = this;
//上一页点击方法
prev.onclick = function () {
//判断现在是不是第一页，如果是第一页，就直接跳出
if (that.showNum == 1) {
// console.log(222);
return;
}
//修改当前的按钮
that.showNum = (that.showNum) * 1 - 1;
//重新渲染数据页面
a.createData()
//计算 当前渲染时 第一个按钮是多少
a.nowNum = that.showNum - Math.ceil(a.pagNum / 2) + 1;
//当前点击按钮数字 小于中间数的时候，页面始终从按钮1开始渲染
if (that.showNum < Math.ceil(a.pagNum / 2)) {
a.nowNum = 1
}
// console.log(that.showNum);
//重新调用分数按钮的方法
a.createPagBtn();
}
//下一页点击方法
next.onclick = function () {
// console.log(objs.data);
//先计算一下最大可以渲染第几页
var n = objs.data.length / objs.itemNum; //计算结果可能为小数
//向上取整
n = Math.ceil(n);
// console.log(n);
//判断现在是不是最后一个按钮
if (that.showNum == n) {
// console.log(111);
return;
}
// console.log(that.showNum);
//修改当前的按钮
that.showNum = (that.showNum)* 1 + 1 ;
// console.log(that.showNum);
//重新渲染数据页面
a.createData()
//计算 当前渲染时 第一个按钮是多少
a.nowNum = that.showNum - Math.ceil(a.pagNum / 2) + 1;
//当前点击按钮数字 小于中间数的时候，页面始终从按钮1开始渲染
if (that.showNum < Math.ceil(a.pagNum / 2)) {
a.nowNum = 1
}
// console.log(that.showNum);
//重新调用分数按钮的方法
a.createPagBtn();
}
}
//4、封装分页按钮的类
function PagItem(num) {
//按钮上的数字
this.num = num;
}
//5、创建分页按钮的方法
PagItem.prototype.pagEle = function () {
var div = document.createElement('div');
div.className = 'pagItem';
div.setAttribute('index', this.num);
div.style.width = '30px';
div.style.height = '30px';
div.style.display = 'inline-block';
div.style.verticalAlign = 'top';
div.style.fontSize = '16px';
div.style.lineHeight = '30px';
div.style.cursor = 'pointer';
div.style.borderRadius = '3px';
div.style.userSelect = 'none';
div.style.margin = '0px 5px';
div.style.backgroundColor = objs.bgColor || '#fff';
div.style.color = objs.fontColor || 'black';
div.style.border = `1px solid ${objs.borderColor || 'black'}`;
div.innerText = this.num;
//添加到pags中
pags.appendChild(div);
var that = this;
//8、分页按钮的点击事件
div.onclick = function () {
//获取一下按钮的自定义属性
var index = this.getAttribute('index');
// console.log(index);
//修改当前展示的页面
a.showNum = index;
//重新渲染数据页面
a.createData()
//计算 当前渲染时 第一个按钮是多少
a.nowNum = index - (Math.ceil(a.pagNum / 2) - 1);
//当前点击按钮数字 小于中间数的时候，页面始终从按钮1开始渲染
if (index < Math.ceil(a.pagNum / 2)) {
a.nowNum = 1
}
//重新调用分数按钮的方法
a.createPagBtn();
}
}
//6、渲染分页按钮的方法
Pag.prototype.createPagBtn = function () {
//1、清除盒子中已有的按钮
pags.innerHTML = '';
//使用for循环，渲染按钮
for (var i = this.nowNum; i < this.nowNum + this.pagNum; i++) {
//先计算一下最大可以渲染第几页
var n = this.data.length / this.itemNum; //计算结果可能为小数
//向上取整
n = Math.ceil(n);
if (i > n) {
break;
}
//生成分页按钮
//实例化分页按钮类
var pagDiv = new PagItem(i);
pagDiv.pagEle();
}
//获取所有的分页按钮
var btn = document.getElementsByClassName('pagItem');
for (var i = 0; i < btn.length; i++) {
// 如果当前展示页面 的数字 跟 按钮上自定义属性 index 相等
// 说明 这个就是 刚才点击的按钮
if (this.showNum == btn[i].getAttribute('index')) {
onCol(btn[i]);
}
}
}
//7、渲染页面数据
Pag.prototype.createData = function () {
//清空当前页面数据
this.dataBox.innerHTML = '';
//计算当前页面从第几条数据开始渲染
var beIndex = (this.showNum - 1) * this.itemNum;
//循环渲染数据
for (var i = beIndex; i < this.itemNum + beIndex; i++) {
//开发者无法决定数据渲染的最终样式
//所以最终样式又用户填写，这里使用回调函数调用
//回调函数的概念
//将一个函数以参数的形式传入另一个函数中
//并在特定的情况下，于另一个函数中，调用这个函数
//callback 传入objs中
objs.callback(this.data[i]);
//判断数据是否合法
if (i >= this.data.length - 1) {
break;
}
//当前要渲染的数据 测试
// var nowData = this.data[i];
// console.log(nowData);
// var div = document.createElement('div');
// div.innerText = nowData.num;
// this.dataBox.appendChild(div);
}
}
//封装一个选中后的样式
function onCol(ele) {
ele.style.backgroundColor = objs.onBgColor || '#007aff';
ele.style.color = objs.onFontColor || '#fff';
ele.style.border = `1px solid ${objs.onBorderColor || '#007aff'}`;
}
//封装一个未选中的样式
function col(ele) {
ele.style.backgroundColor = objs.onBgColor || '#fff';
ele.style.color = objs.onFontColor || '#333';
ele.style.border = `1px solid ${objs.onBorderColor || '#333'}`;
}
//测试 实例化分页框架
var a = new Pag(objs);
//调用渲染框架的方法
a.createPag();
//调用渲染分页按钮的方法
a.createPagBtn();
//调用渲染数据的方法
a.createData();
}
网友评论