原生就是实现分页功能

代码如下:

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实现分页功能的更多相关文章

  1. 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  2. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  3. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  4. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

  5. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

  6. 原生js显示分页效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. 原生js实现分页效果(带实例)

    小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  8. 用pageGroup.js实现分页功能

    1.html页面中 引入 <link rel="stylesheet" type="text/css" href="/stylesheets/p ...

  9. 原生js 定义分页控件,类似于百度搜索

    实现一个类似于百度搜索结果的分页样式,样式可以自定义,接近于原生,少部分Jquery . 1.实现效果截图(默认无任何样式)  2.主要程序代码 define(function (require, e ...

随机推荐

  1. 渐进式web应用开发--拥抱离线优先(三)

    _ 阅读目录 一:什么是离线优先? 二:常用的缓存模式 三:混合与匹配,创造新模式 四:规划缓存策略 五:实现缓存策略 回到顶部 一:什么是离线优先? 传统的web应用完全依赖于服务器端,比如像很早以 ...

  2. Spring Boot日志使用

    前言: 这是我第一次仔细研究Spring Boot相关的知识,就拿日志下手了,欢迎大家指点 Spring Boot日志关系 这个是Spring Boot的启动器,我们点击spring-boot-sta ...

  3. Go语言解密上篇中用java aes实现的加密

    上一篇java aes文件加解密中加密的梅须逊雪三分白,雪却输梅一段香.使用go语言解密. 解密代码如下: AESUtil.go package util import ( "crypto/ ...

  4. [原创]wireshark&xterm安装、配置和使用

    --wireshark && xterm--一.安装wireshark: #apt-get install wireshark二.启动wireshark: #wireshark 或者 ...

  5. RabbitMQ 从入门到精通(二)

    目录 1. 消息如何保障百分之百的投递成功? 1.1 方案一:消息落库,对消息状态进行打标 1.2 方案二:消息的延迟投递,做二次确认,回调检查 2. 幂等性 2.1 幂等性是什么? 2.2 消息端幂 ...

  6. HashSet源码分析:JDK源码系列

    1.简介 继续分析源码,上一篇文章把HashMap的分析完毕.本文开始分析HashSet简单的介绍一下. HashSet是一个无重复元素集合,内部使用HashMap实现,所以HashMap的特征耶继承 ...

  7. [leetcode ]429. N-ary Tree Level Order Traversale (easy)

    原题 思路: bfs,每一层遍历一次加到一个vector,同时把该点的子元素加到queue中. class Solution { public: vector<vector<int> ...

  8. 用tcp协议实现一个并发的socketserver 进行密文登录

    先在客户端进行摘要,客户端把用户名作为盐. 然后在服务端进行二次摘要,用固定的盐(不能让别人知道你的盐是什么),然后存到文件中,密文存储.或者和文件中的密文对比. 这样即使在网络上用户信息被截获,和存 ...

  9. php--学习封装类 (一)(操作mysql数据库的数据访问)

    <?php class DBDA //定义一个类 { //定义成员变量,不能直接定义,前面要加上public或者是private public $host = "localhost&q ...

  10. Spring applicationContext爆出警告“Resource leak: 'applicationContext' is never closed”

    ApplicationContext applicationContext = new ClassPathXmlApplicationContext(xmlPath); 此处applicationCo ...