原生js+ajax分页组件


Posted in Javascript onJanuary 30, 2020

本文实例为大家分享了js+ajax分页组件的具体代码,供大家参考,具体内容如下

1.定义分页组件DOM

<div id="pagination" class="pagination"></div>

2.定义分页组件类及实例方法:

// 分页组件类
function Pagination(_ref) {
 this.id = _ref.id; //分页组件挂载的DOM节点
 this.curPage = _ref.curPage || 1; //初始页码
 this.draw = _ref.draw; // 初始化分页请求次数
 this.pageSize = _ref.pageSize || 5; //分页个数
 this.pageLength = _ref.pageLength; //每页多少条
 this.pageTotal = 0; //总共多少页
 this.dataTotal = 0; //总共多少数据
 this.ajaxParam = _ref.ajaxParam; // 分页ajax
 this.showPageTotalFlag = _ref.showPageTotalFlag || false; //是否显示数据统计
 this.showSkipInputFlag = _ref.showSkipInputFlag || false; //是否支持跳转
 this.ul = document.createElement('ul');

 this.init();
};

// 给实例对象添加公共属性和方法
Pagination.prototype = {
 init: function() {
 var pagination = document.getElementById(this.id);
 pagination.innerHTML = '';
 this.ul.innerHTML = '';
 pagination.appendChild(this.ul);
 var _this = this;
 _this.getPage(_this.curPage)
 .then( function( data ){
  //首页
  _this.firstPage();
  //上一页
  _this.lastPage();
  //分页
  _this.getPages().forEach(function (item) {
  var li = document.createElement('li');
  if (item == _this.curPage) {
   li.className = 'active';
  } else {
   li.onclick = function () {
   _this.curPage = parseInt(this.innerHTML);
   _this.init();
   };
  }
  li.innerHTML = item;
  _this.ul.appendChild(li);
  });
  //下一页
  _this.nextPage();
  //尾页
  _this.finalPage();

  //是否支持跳转
  if (_this.showSkipInputFlag) {
  _this.showSkipInput();
  }
  //是否显示总页数,每页个数,数据
  if (_this.showPageTotalFlag) {
  _this.showPageTotal();
  }
 } )
 
 },
 // 分页数据请求
 getPage: function( curPage ){
 var _this = this;
 _this.draw++;
 return new Promise( function( resolve, reh ){
  $.ajax( {
  url: _this.ajaxParam.url,
  type: _this.ajaxParam.type,
  dataType: "json",
  data: {
   curPage: curPage,
   pageLength: 10,
   draw: _this.draw
  },
  success: function(data) {
   if( data.isSuccess === true ){
   var data = data;
   _this.pageTotal = Math.ceil( parseFloat( data.data.totalResult/_this.pageLength ) ),
   _this.dataTotal = data.data.totalResult,
   _this.draw = data.data.draw;
   resolve( data )
   }else {
   reject( "请求错误" )
   }
  },
  error: function(err) {
   reject( err )
  }
  } )
 })
 },
 //首页
 firstPage: function() {
 var _this = this;
 var li = document.createElement('li');
 li.innerHTML = '首页';
 this.ul.appendChild(li);
 li.onclick = function () {
  var val = parseInt(1);
  _this.curPage = val;
  _this.init();
 };
 },
 //上一页
 lastPage: function() {
 var _this = this;
 var li = document.createElement('li');
 li.innerHTML = '<';
 if (parseInt(_this.curPage) > 1) {
  li.onclick = function () {
  _this.curPage = parseInt(_this.curPage) - 1;
  _this.init();
  };
 } else {
  li.className = 'disabled';
 }
 this.ul.appendChild(li);
 },
 //分页
 getPages: function() {
 var pag = [];
 if (this.curPage <= this.pageTotal) {
  if (this.curPage < this.pageSize) {
  //当前页数小于显示条数
  var i = Math.min(this.pageSize, this.pageTotal);
  while (i) {
   pag.unshift(i--);
  }
  } else {
  //当前页数大于显示条数
  var middle = this.curPage - Math.floor(this.pageSize / 2),
   //从哪里开始
   i = this.pageSize;
  if (middle > this.pageTotal - this.pageSize) {
   middle = this.pageTotal - this.pageSize + 1;
  }
  while (i--) {
   pag.push(middle++);
  }
  }
 } else {
  console.error('当前页数不能大于总页数');
 }
 if (!this.pageSize) {
  console.error('显示页数不能为空或者0');
 }
 return pag;
 },
 //下一页
 nextPage: function() {
 var _this = this;
 var li = document.createElement('li');
 li.innerHTML = '>';
 if (parseInt(_this.curPage) < parseInt(_this.pageTotal)) {
  li.onclick = function () {
  _this.curPage = parseInt(_this.curPage) + 1;
  _this.init();
  };
 } else {
  li.className = 'disabled';
 }
 this.ul.appendChild(li);
 },
 //尾页
 finalPage: function() {
 var _this = this;
 var li = document.createElement('li');
 li.innerHTML = '尾页';
 this.ul.appendChild(li);
 li.onclick = function () {
  var yyfinalPage = _this.pageTotal;
  var val = parseInt(yyfinalPage);
  _this.curPage = val;
  _this.init();
 };
 },
 //是否支持跳转
 showSkipInput: function() {
 var _this = this;
 var li = document.createElement('li');
 li.className = 'totalPage';
 var span1 = document.createElement('span');
 span1.innerHTML = '跳转到';
 li.appendChild(span1);
 var input = document.createElement('input');
 input.setAttribute("type","number");
 input.onkeydown = function (e) {
  var oEvent = e || event;
  if (oEvent.keyCode == '13') {
  var val = parseInt(oEvent.target.value);
  if (typeof val === 'number' && val <= _this.pageTotal && val>0) {
   _this.curPage = val;
  }else{
   alert("请输入正确的页数 !")
  }
  _this.init();
  }
 };
 li.appendChild(input);
 var span2 = document.createElement('span');
 span2.innerHTML = '页';
 li.appendChild(span2);
 this.ul.appendChild(li);
 },
 //是否显示总页数,每页个数,数据
 showPageTotal: function() {
 var _this = this;
 var li = document.createElement('li');
 li.innerHTML = '共 ' + _this.pageTotal + ' 页';
 li.className = 'totalPage';
 this.ul.appendChild(li);
 var li2 = document.createElement('li');
 li2.innerHTML = '每页 ' + _this.pageLength + ' 条';
 li2.className = 'totalPage';
 this.ul.appendChild(li2);
 var li3 = document.createElement('li');
 li3.innerHTML = '共 ' + _this.dataTotal + ' 条数据';
 li3.className = 'totalPage';
 this.ul.appendChild(li3);
 var li4 = document.createElement('li');
 li4.innerHTML = _this.curPage + "/" + _this.pageTotal;
 li4.className = 'totalPage';
 this.ul.appendChild(li4);
 }
};

3.实例化分页组件

let pageInstance = new Pagination({
 id: 'pagination',
 curPage:1, // 初始页码,不填默认为1
 draw: 0, // 当前渲染次数统计
 pageLength: 10, //每页多少条
 pageSize: 5, //分页个数,不填默认为5
 showPageTotalFlag:true, //是否显示数据统计,不填默认不显示
 showSkipInputFlag:true, //是否支持跳转,不填默认不显示
 ajaxParam: { //分页ajax
 url: 'https://www.easy-mock.com/mock/5cc6fb7358e3d93eff3d812c/page',
 type: "get",
 }
})

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

Javascript 相关文章推荐
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
javascript每日必学之封装
Feb 23 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 Javascript
javascript设计模式之迭代器模式
Jan 30 #Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 #Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 #Javascript
vue引用外部JS的两种种方法
Jan 28 #Javascript
Java Varargs 可变参数用法详解
Jan 28 #Javascript
关于引入vue.js 文件的知识点总结
Jan 28 #Javascript
JS简单表单验证功能完整示例
Jan 26 #Javascript
You might like
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python实现图片九宫格分割
2021/03/07 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
小学后勤管理制度
2014/01/14 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
手术室护士个人总结
2015/02/13 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
Selenium浏览器自动化如何上传文件
2022/04/06 Python