首页
所有分类
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获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
学习vue.js计算属性
Dec 03 Javascript
浅析BootStrap中Modal（模态框）使用心得
Dec 24 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
vue实现某元素吸顶或固定位置显示（监听滚动事件）
Dec 13 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
浅析JavaScript 函数防抖和节流
Jul 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
Spring JPA(1) Mint UI(1) Spring Bean(1) REST(1) 远程桌面(2) exists(2) Switch(1) cmd(1) 慢日志(1) mt-swipe(1)
You might like
用PHP实现小型站点广告管理
2006/10/09 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
索趣科技的答案
2007/02/07 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
微信小程序自定义组件
2017/08/16 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
JS高级技巧(简洁版)
2018/07/29 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
vue中keep-alive，include的缓存问题
2019/11/26 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
python实现简单图书管理系统
2019/11/22 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
Parfume Klik丹麦：香水网上商店
2018/07/10 全球购物
七年级数学教学反思
2014/01/22 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python