首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生js实现分页效果

Posted in Javascript onSeptember 23, 2020

本文实例为大家分享了js实现分页效果的具体代码，供大家参考，具体内容如下

效果如下：

原生js实现分页效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style type="text/css">
 
 </style>
</head>
<body>
 <div id="page-nation"></div>
 <script src="./page.js"></script>
 <script> 
 //分页调用方法 
 const Api=new pageNation({ 
  el:"#page-nation",//分页器位置 
  page:1,//当前页 
  size:5,//默认5,10,15,20 
  total:100,//数据总条数 
  styUrl:
  './page.css',//样式地址（可修改） 
    IsShowBtn: {//设置需要显示的按钮
     choosePageSize: true,//是否显示下拉选项
     IsShowPrevOrNextBtn: true,//是否显示上一页下一页按钮
     IsShowEnterBtn: true,//是否显示跳转输入
     IsShowTotalPage:true,//是否显示总页数
    },
  callback:function(page,size,total){ 
   console.log(page,size,total); 
   //此处为ajax请求 
  } 
 }); 
</script> 
</body>
</html>

page.js

var pageNation;
pageNation = (function () {
 function extend(target, source) {
  for (var obj in source) {
   target[obj] = source[obj];
  }
  return target;
 }
 function pageNation(options) {
  var defaultOptions = {
   el: "body",//分页父容器 
   page: 1,
   size: 10,
   total: 0,
   styUrl: 'style.css',
   callback: null,
   IsShowBtn: {//设置需要显示的按钮
    choosePageSize: true,//是否显示下拉选项
    IsShowPrevOrNextBtn: true,//否显示上一页下一页按钮
    IsShowEnterBtn: true,//是否显示跳转输入
    IsShowTotalPage:true,//是否显示总页数
   }
  };
  this.options = extend(defaultOptions, options) || {};
  this.options.el = document.querySelectorAll(this.options.el)[0];
  this.pageT = Math.ceil(this.options.total / this.options.size);
  this.init();
  if (!document.querySelector("#dynamic-style")) {
   this.pageStyle();
  }
  //this.options.callback(1,self.options.size,self.options.total); 
 }

 var proto = pageNation.prototype || {};
 proto.rander = function (page, size, total) {
  this.options.page = !!page ? page : 1;
  this.options.size = !!size ? size : 10;
  this.options.total = !!total ? total : 0;// 
  this.pageT = Math.ceil(this.options.total / this.options.size);
  this.init();
  this.page_nation = null;
 };
 proto.init = function () {
  var self = this;
  var pageNum = function (page) {//创建分页器 
   return (function () {
    let ol = document.createElement("ol");
    ol.classList.add("page-ol");
    let p = !!page ? page : 1;
    let tPage = Math.ceil(self.options.total / self.options.size);
    let s = p <= 3 ? 1 : p > (tPage - 3) ? tPage - 4 : p - 2;
  s=s==0?1:s;
    for (let i = s; i < (s + 5); i++) {
     if (i > tPage) {
      break;
     }
     let li = document.createElement("li");
     li.innerText = i;
     if (i == p) {
      li.classList.add("hover");
     }
     ol.appendChild(li);
    }
    return ol;
   })(page);
  };
  var sizeNum = function (size) {//重置size 
   return (function () {
    let select = document.createElement("select");
    select.setAttribute("class", "page-Select");
    let s = !!size ? size : 10;
    //let tPage=Math.ceil(self.options.total/self.options.size); 
    for (let i = 5; i <= (5 * 4); i += 5) {
     let option = document.createElement("option");
     option.value = i;
     option.innerText = i;
     if (i === self.options.size) {
      option.setAttribute("selected", "selected");
     }
     select.appendChild(option);
    }
    return select;
   })(size);
  };
  var prevBtn = function () {//上一页按钮 
   return (function () {
    let button = document.createElement("span");
    button.setAttribute("class", "prev-btn");
    button.innerText = "上一页";
    if (self.options.page == 1) {
     button.classList.add("disabled")
    };
    return button;
   })();
  };
  var nextBtn = function () {//下一页按钮 
   return (function () {
    let button = document.createElement("span");
    button.setAttribute("class", "next-btn");
    button.innerText = "下一页";
    if (self.options.page == self.pageT) {
     button.classList.add("disabled")
    }
    ;
    return button;
   })();
  };
  var pageMark = function () {//页码标识 
   return (function () {
    let span = document.createElement("span");
    span.setAttribute("class", "pageMark");
    span.innerHTML = "<strong>" + self.options.page + "</strong> / <strong>" + Math.ceil(self.options.total / self.options.size) + "</strong>";
    return span;
   })();
  };
  var enterBtn = function () {//跳转按钮 
   return (function () {
    let button = document.createElement("span");
    button.setAttribute("class", "enter-btn");
    let ipt = document.createElement("input");
    ipt.value = self.options.page;
    ipt.setAttribute("type", "text");

    let b = document.createElement("span");
    b.setAttribute("class", "enterBtn");
    b.innerText = "跳转";

    button.appendChild(ipt);
    button.appendChild(b);

    return button;
   })();
  };
  let page_nation = self.options.el.querySelector(".page-nation");
  if (page_nation != null && page_nation != "undefind") {
   page_nation.innerHTML = "";
  }
  else {
   page_nation = document.createElement("div");
   page_nation.classList.add("page-nation");
   self.options.el.appendChild(page_nation);
  }
  page_nation.appendChild(new pageNum(self.options.page));
  self.options.IsShowBtn.choosePageSize&&page_nation.appendChild(new sizeNum(self.options.size));
  self.options.IsShowBtn.IsShowPrevOrNextBtn&&page_nation.appendChild(new prevBtn());
  self.options.IsShowBtn.IsShowPrevOrNextBtn&&page_nation.appendChild(new nextBtn());
  page_nation.appendChild(new pageMark());
  self.options.IsShowBtn.IsShowEnterBtn&&page_nation.appendChild(new enterBtn());

  self.page_nation = document.querySelector(".page-nation");

  this.switchPage(self.options.callback);
  this.switchSize(self.options.callback);
  return self;
 };
 proto.pageStyle = function () {
  let headDoc = document.querySelector("head");
  var linkTag = document.createElement("link");
  var cssURL = this.options.styUrl;
  linkTag.id = 'dynamic-style';
  linkTag.href = cssURL;
  linkTag.setAttribute('rel', 'stylesheet');
  linkTag.setAttribute('media', 'all');
  linkTag.setAttribute('type', 'text/css');
  headDoc.appendChild(linkTag);
 };
 proto.switchPage = function (fun) {
  let self = this;
  let lis = this.page_nation.children[0].children;
  for (let i = 0, len = lis.length; i < len; i++) {
   lis[i].onclick = function () {
    self.options.page = this.innerText;
    self.rander(self.options.page, self.options.size, self.options.total);
   };
  }
  this.options.el.querySelectorAll(".prev-btn")[0].onclick = function (e) {
   //console.time("rr"); 
   self.options.page = --self.options.page;
   self.rander(self.options.page, self.options.size, self.options.total);
   //console.timeEnd("rr"); 
  };
  this.options.el.querySelectorAll(".next-btn")[0].onclick = function (e) {
   self.options.page = ++self.options.page;
   self.rander(self.options.page, self.options.size, self.options.total);
  };
  this.options.el.querySelectorAll(".enterBtn")[0].onclick = function (e) {
   let val = this.previousElementSibling.value;
   if (!val || val > self.pageT || val < 1) {
    alert("参数超出范围！");
    return false;
   } else {
    self.options.page = val;
    self.rander(self.options.page, self.options.size, self.options.total);
   }
  };
  fun(self.options.page, self.options.size, self.options.total);
 };
 proto.switchSize = function (fun) {
  let self = this;
  let lis = this.page_nation.children[1];
  lis.onchange = function () {
   self.options.size = Number(this.value);
   self.rander(1, self.options.size, self.options.total);
   fun(1, self.options.size, self.options.total);
  }
 };
 return pageNation;
})();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

原生js实现分页效果

- Author -

zyfacd

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
jquery实现（textarea）placeholder自动换行
Dec 22 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
javascript流程控制语句集合
Sep 18 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
原生js实现购物车
Sep 23 #Javascript
javascript实现简易计算器功能
Sep 23 #Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 #Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 #Javascript
Vue3为什么这么快
Sep 23 #Javascript
Angular短信模板校验代码
Sep 23 #Javascript
JavaScript实现单点登录的示例
Sep 23 #Javascript
android studio(3) OpenLayer(1) IDEA(2) 多维数组(1) 移动开发(2) 多线程(6) 嵌套(1) Spring Boot(5) 安卓(1) Sqlite(2)
You might like
php中截取字符串支持utf-8
2007/01/18 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
浅谈pycharm使用及设置方法
2019/09/09 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
Vince官网：全球著名设计师品牌，休闲而优雅的服饰
2017/01/15 全球购物
快时尚眼镜品牌，全国连锁眼镜店：LOHO眼镜生活
2018/10/08 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
公司寄语大全
2014/04/10 职场文书
2014年度考核工作总结
2014/12/24 职场文书
初中语文教师研修日志
2015/11/13 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
JavaScript执行机制详细介绍
2021/12/06 Javascript