首页
所有分类
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 input 数字验证代码
Jul 30 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
js自定义input文件上传样式
Oct 26 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
原生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
ICF-SW07(1) ICF-SW7600(1) S500(1) BCL3000(2) 低放电路(1) PL450(1) PL990(2) S400(1) S700(1) H-501(1)
You might like
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
PHP的FTP学习(四)
2006/10/09 PHP
php 操作excel文件的方法小结
2009/12/31 PHP
php微信开发之百度天气预报
2016/11/18 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
js中function()使用方法
2013/12/24 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解
2015/03/13 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
Python join()函数原理及使用方法
2020/11/14 Python
澳大利亚最受欢迎的超级商场每日优惠：Catch
2020/11/17 全球购物
大学生简历的个人自我评价
2013/12/04 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
个人总结与自我评价
2015/02/14 职场文书
质量保证书格式
2015/02/27 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript