原生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实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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
自动跳转中英文页面
2006/10/09 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
9个比较实用的php代码片段
2016/03/15 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
Javascript倒计时代码
2010/08/12 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
Python中datetime常用时间处理方法
2015/06/15 Python
Python二分查找详解
2015/09/13 Python
python读取中文txt文本的方法
2018/04/12 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
干部对照检查材料范文
2014/08/26 职场文书
大学生毕业评语
2014/12/31 职场文书
保安辞职信范文
2015/02/28 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
初中美术教学反思
2016/02/17 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书