原生js实现分页效果

2024-12-24 01:58:07

本文实例为大家分享了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实现分页导航效果

前言最近的项目需要添加一个分页导航的功能,没有用网上封装好的文件.通过JS自己简单实现了效果.下面和大家分享一下. 内容下图为首次加载后的效果,默认显示5页, 当点击下一页时将选中页面的页码置于中间下面让我们来看看实现的代码第一部分是在页面显示内容的处理 function SetListPage() { $.ajax({ type: "GET", url: "ajax/PhoneList.ashx?", datatype: 'json', success:
JSP实现分页效果

本文实例为大家分享了JSP实现分页的具体代码,供大家参考,具体内容如下咱们在浏览网页的时候,当一个页面的数据不足以展示完全所有的内容,一般都涉及到分页,下一页的功能该怎么实现呢?首先我们来分析一下: 那么直接上代码: 这里需要备注一下,本次的代码是在对三层优化之后进行操作的,所以我先把数据访问层的重构代码贴出来: package org.ThreeLayer.DButil; import java.sql.Connection; import java.sql.DriverManager; i
非常不错的一个JS分页效果代码，值得研究

本来想用网上找来的分页程序,不过都得做修改,感觉麻烦了,还是自己写一个好了,以后自己用的时候修改就方便了~~大家都多动手,自己写的才是最好的,日后想干什么的,做修改也是很容易的~~顺便也扩充一下自己的代码库~~ 补充一句,cpage是页面计数,应为全局变量,这样可以随处调用它,totalpage是总页数 JS静态分页程序 a:link,a:visited,a:hover,.current,#info{ border:1px solid #DDD; background:#F2F2F2; disp
纯javascript实现分页(两种方法)

先给大家贴效果图: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用limit进行分页. 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值
pageGroup.js实现分页功能

本文实例为大家分享了pageGroup.js实现分页功能的具体代码,供大家参考,具体内容如下 1.html页面引入 <link rel="stylesheet" type="text/css" href="/stylesheets/pageGroup.css" rel="external nofollow" > <script src="/javascripts/web/pageGroup.js&
js分页显示div的内容

div分页显示_我们_www.jb51.net #frameContent{ width:500px; /*调整显示区的宽*/ height:200px; /*调整显示区的高*/ font-size:14px; line-height:20px; border:1px solid #000000; overflow-pageINdex:hidden; overflow-y:hidden; word-break:break-all; } a{ font-size:12px; color:#0000
利用js制作html table分页示例(js实现分页)

有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码一.JS代码复制代码代码如下: <script type="text/javascript"> var pageSize = 15; //每页显示的记录条数 var curPage=0; //当前页 var lastPage; //最后页 var
纯js分页代码(简洁实用)

复制代码代码如下: //每页显示字数PageSize=5000;//分页模式flag=2;//1:根据字数自动分页 2:根据[NextPage]分页//默认页startpage = 1;//导航显示样式 0:常规 1:直接 3:下拉TopShowStyle = 1;DownShowStyle = 0; var currentSet,CutFlag,TotalByte,PageCount,key,tempText,tempPage; key=""; currentSet=0; var
jquery.pager.js实现分页效果

本文实例为大家分享了jquery.pager.js实现分页的具体代码,供大家参考,具体内容如下 1.html <link href="/stylesheets/Pager.css" rel="external nofollow" rel="stylesheet" type="text/css"/> <script src="/javascripts/web/jquery.pager.js"
原生js+ajax分页组件

本文实例为大家分享了js+ajax分页组件的具体代码,供大家参考,具体内容如下 1.定义分页组件DOM <div id="pagination" class="pagination"></div> 2.定义分页组件类及实例方法: // 分页组件类 function Pagination(_ref) { this.id = _ref.id; //分页组件挂载的DOM节点 this.curPage = _ref.curPage || 1; //初

原生js实现分页效果

相关推荐

随机推荐