html前端分页,js前端分页
展示与简介
简介
YPage.js是基于jQuery实现的前端分页,通过js实现少量数据的分页(为什么是少量,因为多了就有性能问题)
演示
下面是效果图,css样式是可以修改的
使用说明
导入
我们先要导入jQuery,因为这是必须的
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="./YPage.js"></script>
使用
<script>
var page = new YPage("#main","#button",3,0);
</script>
这里有四个参数
第一个:需要被分页的item的选择器(需要带上符号,#id, .class, 标签),这里需要注意的是,item是需要被一个父标签包裹,例如:
<div id="main">
<h5>第1</h5>
<h5>第2</h5>
...
</div>
第二个:参数是分页的按钮,就是上一页,下一页这些,一般提供一个空的父标签就行,例如:
<div id="button"></div>
第三个:每一页显示的数量
第四个:占时没使用
提供方法
getIndex()
获取当前在第几页
setIndex(index)
设置具体在那一页
deleteItem(id)
传入要被删除的item 的id
addItem(item)
添加一个item,item是一段html代码
haveItem(id)
判断是否有指定id的item
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a {
display: inline-block;
padding: 5px 5px 5px 5px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
text-decoration: none;
font-size: 14px;
cursor: pointer;
}
.layui-laypage-curr {
display: inline-block;
padding: 5px 5px 5px 5px;
color: red;
border: none;
border-radius: 5px;
text-decoration: none;
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="main">
<h5>第1</h5>
<h5>第2</h5>
<h5>第3</h5>
<h5>第4</h5>
<h5>第5</h5>
<h5>第6</h5>
<h5>第7</h5>
<h5>第8</h5>
<h5>第9</h5>
<h5>第10</h5>
<h5>第11</h5>
<h5>第12</h5>
<h5>第13</h5>
<h5>第14</h5>
<h5>第15</h5>
<h5>第16</h5>
<h5>第17</h5>
<h5>第18</h5>
<h5>第19</h5>
<h5>第20</h5>
<h5>第21</h5>
<h5>第22</h5>
<h5>第23</h5>
<h5>第24</h5>
<h5>第25</h5>
<h5>第26</h5>
<h5>第27</h5>
<h5>第28</h5>
</div>
<div id="button"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="./YPage.js"></script>
<script>
var page = new YPage("#main","#button",3,0);
</script>
YPage.js 源码
class YPage {
//构造器
constructor(pageId,buttonId,pageSize,fontSize) {
this.pageId = pageId;//主页面 需要传选择器类别
this.buttonId = buttonId;//下面按钮 需要传选择器类别
this.fontSize = fontSize;//字体大小
this.pageSize =pageSize;//每页数量
this.total = 0;//总共页
this.index = 1;//当前页
this.onclickListener();
this.init();
}
//[内部使用]初始化函数
init(){
var items = new Array();
var item = $(this.pageId);
item.children().each(function () {
items.push(this);
});
this.items = items;//保存所有mian里面的内容
this.total = Math.ceil(this.items.length/this.pageSize);//向上取整
this.showButtonPage();
this.showMainPage();
}
//[内部使用]更新主要内容
showMainPage(){
if (this.items.length == 0){
return ;
}
var main = $(this.pageId);
main.html("");
var num = this.pageSize;
if (this.total == this.index){
num = this.items.length - ((this.index - 1) * this.pageSize);
}
var html = "";
for (var i = 0;i<num ;i++ ){
var aa = $(this.items[(this.index - 1) * this.pageSize + i ]);
html += aa[0].outerHTML;
}
main.html(html);
}
//[内部使用]更新下面分页
showButtonPage(){
var button = $(this.buttonId);
button.html("");
var prevDisabled = "";
var prev = this.index - 1;
if (this.index == 1){
prevDisabled = " layui-disabled ";
prev = prev + 1;
}
var nextDisabled = "";
var next = this.index + 1;
if (this.index == this.total){
nextDisabled = " layui-disabled ";
next = next - 1;
}
//头部信息
var html = "<div><div class=\"layui-box layui-laypage layui-laypage-default\" id=\"layuiPage\">";
//上一页
html += "<a href=\"javascript:;\" class=\"layui-laypage-prev "+prevDisabled+"\" page=\""+prev+"\">上一页</a>";
//处理当前页前面的
if (this.index - 1 < 4){//前面页面不足 不需要省略
for (var i = 1;i<this.index;i++){
html += "<a href=\"javascript:;\" page=\""+i+"\">"+i+"</a>";
}
}else {//需要省略
//第一页
html += "<a href=\"javascript:;\" class=\"layui-laypage-first\" page=\"1\" title=\"首页\">1</a>";
//省略
html += "<span class=\"layui-laypage-spr\">…</span>";
//当前页前面两个
for (var i = this.index - 2;i<this.index;i++){
html += "<a href=\"javascript:;\" page=\""+i+"\">"+i+"</a>";
}
}
//当前页
html += "<span class=\"layui-laypage-curr\"><em class=\"layui-laypage-em\"></em><em>"+this.index+"</em></span>";
//处理后面的
if (this.total - this.index < 4){// 不足 不需要省略
for (var i = this.index + 1;i<=this.total;i++){
html += "<a href=\"javascript:;\" page=\""+i+"\">"+i+"</a>";
}
}else {//需要省略
//当前页后面两个
for (var i = this.index+1;i<this.index+3;i++){
html += "<a href=\"javascript:;\" page=\""+i+"\">"+i+"</a>";
}
//省略号
html += "<span class=\"layui-laypage-spr\">…</span>";
//尾页
html += "<a href=\"javascript:;\" class=\"layui-laypage-last\" title=\"尾页\" page=\""+this.total+"\">"+this.total+"</a>";
}
//下一页
html += "<a href=\"javascript:;\" class=\"layui-laypage-next "+nextDisabled+"\" page=\""+next+"\">下一页</a>";
//尾部信息
html += "</div></div>";
//设置到页面
button.html(html);
}
//[外部使用]获取当前在第几页
getIndex(){
return this.index;
}
//[内外部使用]设置具体页数
setIndex(index){
if (this.items.length ==0){
return ;
}
this.index = parseInt(index);
this.showButtonPage();
this.showMainPage();
}
//[内部使用]设置点击监听
onclickListener(){
var thisclass = this;
$(document).on("click",thisclass.buttonId+" a",function () {
var num = $(this).attr("page");
thisclass.setIndex(num);
});
}
//[外部使用]传入要被删除的item 的id
deleteItem(id){
for (var i= 0;i<this.items.length;i++){
if ($(this.items[i]).attr('id') == id){
var aa = $(this.items[i]);
var ret = aa[0].outerHTML;
this.items.splice(i, 1);
this.total = Math.ceil(this.items.length/this.pageSize);//向上取整
if (this.index > this.total){
this.index -= 1;
}
this.showButtonPage();
this.showMainPage();
return ret;
}
}
}
//[外部使用]添加一个item
addItem(item){
var m_tiem = $(item);
this.items.push(m_tiem);
this.total = Math.ceil(this.items.length/this.pageSize);//向上取整
this.setIndex(this.index);
}
//[外部使用]判断是否有指定id的item
haveItem(id){
for (var i= 0;i<this.items.length;i++){
if ($(this.items[i]).attr('id') == id){
return true;
}
}
return false;
}
}
8335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
