原生js实现分页功能
原生就是实现分页功能
代码如下:
var pagination = function(option,fun){
this.parentId = option.id; //容器
this.pageSize = option.pageSize || 1; //每页显示多少条
this.totals = option.totals || 0; //总条目数
this.currentPage = option.currentPage || 1; //当前页
this.showFirstBtn = option.showFirstBtn || false; //显示首页按钮
this.showLastBtn = option.showLastBtn || false; //显示尾页按钮
this.totalPage = Math.ceil(this.totals / this.pageSize);//总页数
this.firstText = '首页';
this.lastText = '尾页';
this.preText = '上一页';
this.nextText = '下一页';
this.goText = '跳转至';
/**
* 创建dom元素
*/
this.createDom = function(nodeName,attr,text){
var el = document.createElement(nodeName);
if(attr){
for(var key in attr){
el.setAttribute(key,attr[key]);
}
}
if(text){
el.innerText = text;
}
return el;
}
/**
* 添加className
*/
this.addClass = function(ele,className){
var oldClass = ele.className.split(' ');
if(oldClass.indexOf(className) < 0){
oldClass.push(className);
ele.className = oldClass.join(' ');
}
}
/**
* 删除class
*/
this.delClass = function(ele,className){
var classArr = ele.className.split(' ');
classArr.forEach(function(name,i){
if(name == className){
classArr.replace(i,1);
}
});
ele.className = classArr;
}
/**
* 是否包含class
*/
this.hasClass = function(ele,className){
var classArr = ele.className.split(' ');
return classArr.indexOf(className) < 0 ? false : true;
}
var self = this;
this.refshPage = function(index){
self.currentPage = index;
fun(index);
self.renderPage();
var pageParent = document.getElementById(self.parentId);
if(index == 1){
self.addClass(pageParent.querySelector('.preBtn'),'btnDisabled'); }else if(index == self.totalPage){
self.addClass(pageParent.querySelector('.nextBtn'),'btnDisabled');
}else{
self.delClass(pageParent.querySelector('.preBtn'),'btnDisabled');
self.delClass(pageParent.querySelector('.nextBtn'),'btnDisabled');
}
}
/**
* 生成分頁dom
*/
this.getPageDom = function(index,totalPage){
var pageBox = self.createDom('div',{class:'pageBox'});
var firstBtn = self.createDom('span',{class:'firstBtn'},self.firstText);
var lastBtn = self.createDom('span',{class:'lastBtn'},self.lastText);
var preBtn = self.createDom('span',{class:'preBtn'},self.preText);
var nextBtn = self.createDom('span',{class:'nextBtn'},self.nextText);
if(self.showFirstBtn){
pageBox.appendChild(firstBtn);
}
if(self.showLastBtn){
pageBox.appendChild(lastBtn);
}
firstBtn.onclick = function(){
self.refshPage(1);
}
lastBtn.onclick = function(){
self.refshPage(totalPage);
}
preBtn.onclick = function(){
var index = --self.currentPage;
if(index < 1)index = 1;
self.refshPage(index);
}
nextBtn.onclick = function(){
var index = ++self.currentPage;
if(index > totalPage)index = totalPage;
self.refshPage(index);
}
pageBox.appendChild(preBtn);
if(totalPage <= 10){
for(var i = 1; i <= totalPage; i++){
var page = self.createDom('span',{class:'pageNum'},i);
if(i == index){
self.addClass(page,'pageActive'); }
pageBox.appendChild(page);
(function(i){
page.onclick = function(){
self.refshPage(i);
}
})(i);
}
pageBox.appendChild(nextBtn);
}else{
if(index <= 5){
for(var i = 1; i < 9; i++){
var page = self.createDom('span',{class:'pageNum'},i);
if(i == index) self.addClass(page,'pageActive');
pageBox.appendChild(page);
(function(i){
page.onclick = function(){
self.refshPage(i);
}
})(i);
}
pageBox.appendChild(self.createDom('span',{class:'dots'},'...'));
var lastPage = self.createDom('span',{class:'pageNum'},totalPage);
pageBox.appendChild(lastPage);
lastPage.onclick = function(){
self.refshPage(totalPage);
}
pageBox.appendChild(nextBtn);
}
if(index >= (totalPage - 4)){
var firstPage = self.createDom('span',{class:'pageNum'},1);
firstPage.onclick = function(){
self.refshPage(1);
}
pageBox.appendChild(firstPage);
pageBox.appendChild(self.createDom('span',{class:'dots'},'...'));
for(var i = totalPage - 9; i <= totalPage; i++){
var page = self.createDom('span',{class:'pageNum'},i);
if(i == index) self.addClass(page,'pageActive');
pageBox.appendChild(page);
(function(i){
page.onclick = function(){
self.refshPage(i);
}
})(i);
}
pageBox.appendChild(nextBtn);
}
if(index > 5 && index < (totalPage - 4)){
var firstPage = self.createDom('span',{class:'pageNum'},1);
firstPage.onclick = function(){
self.refshPage(1);
}
pageBox.appendChild(self.createDom('span',{class:'dots'},'...'));
for(var i = index - 3; i <= index + 3; i++){
var page = self.createDom('span',{class:'pageNum'},i);
if(i == index) self.addClass(page,'pageActive');
pageBox.appendChild(page);
(function(i){
page.onclick = function(){
self.refshPage(i);
}
})(i);
}
pageBox.appendChild(self.createDom('span',{class:'dots'},'...'));
var lastPage = self.createDom('span',{class:'pageNum'},totalPage);
pageBox.appendChild(lastPage);
lastPage.onclick = function(){
self.refshPage(totalPage);
}
pageBox.appendChild(nextBtn);
}
}
if(index == 1){
self.addClass(preBtn,'btnDisabled');
}else if(index == totalPage){
self.addClass(nextBtn,'btnDisabled');
}
if(self.showLastBtn){
pageBox.appendChild(lastBtn);
}
return pageBox;
};
/**
* 渲染page
*/
this.renderPage = function(){
var pageParent = document.getElementById(self.parentId);
var pagesDom = self.getPageDom(self.currentPage,self.totalPage);
pageParent.innerHTML = '';
pageParent.appendChild(pagesDom);
}
this.renderPage();
}
调用方法:
new pagination({
id:dataStore.pageId,
pageSize:dataStore.pageSize,
totals:data.length,
currentPage:1
},function(index){
var startNum = (index - 1 ) * dataStore.pageSize;
var endNun = index * dataStore.pageSize;
var listData = data.slice(startNum,endNun);
renderMain(listData);
});
分页效果:
原生js实现分页功能的更多相关文章
- 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- 原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
- 原生 js 写分页
欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...
- 原生js显示分页效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生js实现分页效果(带实例)
小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
- 用pageGroup.js实现分页功能
1.html页面中 引入 <link rel="stylesheet" type="text/css" href="/stylesheets/p ...
- 原生js 定义分页控件,类似于百度搜索
实现一个类似于百度搜索结果的分页样式,样式可以自定义,接近于原生,少部分Jquery . 1.实现效果截图(默认无任何样式) 2.主要程序代码 define(function (require, e ...
随机推荐
- C# 管道式编程
受 F# 中的管道运算符和 C# 中的 LINQ 语法,管道式编程为 C# 提供了更加灵活性的功能性编程.通过使用 扩展函数 可以将多个功能连接起来构建成一个管道. 前言 在 C# 编程中,管道式编程 ...
- 20190127-Orleans与SF小伙伴的部分问答
Orleans 怎么部署到服务器? 方式1:Orleans 服务端寄宿在Web应用中,将Web应用部署到服务器 方式2:通过SF/K8s部署到服务器 不同服务器上的谷仓和谷如何调配? 由Orleans ...
- ElasticSearch7.2安装
1.环境 Java -version:java11 centos: 7.2 elasticsearch: 7.2 2.获取压缩包 wget https://artifacts.elastic.co/d ...
- js 使用ES6 实现从json中取值并返回新的数组或者字符串
1.获取的json数据是这样的: data:[ { 'Id': '1', 'Phone': '123456', 'Name': '张三', }, { 'Id': '2', 'Phone': '7894 ...
- 为git伸冤(使用git中可能会踩的一些坑)
窦娥被冤,六月飞霜.今天我两次遇到git被冤枉的情况,要是其它人也遇到这种情况导致git使用量缩小,那也要六月飞霜了. git第一次被冤枉是同事以为git的版本管理有问题.事情是这样的,同事提交新版本 ...
- OnCommandStateChange 不响应
原因是我把原先的OnCommandStateChange( long nCommand, BOOL bEnable )大BOOL改成了小bool,回调不认识了.
- Python文件的两种用途
目录 一.Python文件的两种用途 一.Python文件的两种用途 python文件总共有两种用途,一种是执行文件:另一种是被当做模块导入. 编写好的一个python文件可以有两种用途: 脚本,一个 ...
- python模块知识二 random -- 随机模块、序列化 、os模块、sys -- 系统模块
4.random -- 随机模块 a-z:97 ~ 122 A-Z :65 ~ 90 import random #浮点数 print(random.random())#0~1,不可指定 print( ...
- 02-Kubenetes资源
目录 Kubenetes资源 常用资源对象 标签labels 创建资源的方式 Pod pods.spec.containers 必须 nodeSelector <map [string]stri ...
- nested exception is java.io.FileNotFoundException: class path resource [applicationContext.xml] cannot be opened because it does not exist
org.apache.ibatis.exceptions.PersistenceException: ### Error building SqlSession. ### The error may ...