原生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;
})();

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

Javascript 相关文章推荐
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 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
You might like
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
CI框架中zip类应用示例
2014/06/17 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
php生成二维码
2015/08/10 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python语言元素知识点详解
2019/05/15 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
深入了解NumPy 高级索引
2020/07/24 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
详解Python中的路径问题
2020/09/02 Python
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
init进程的作用
2012/04/12 面试题
办公室文秘岗位职责
2013/11/15 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
销售主管竞聘书
2014/03/31 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python