原生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 相关文章推荐
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
js+canvas绘制图形验证码
Sep 21 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
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
php创建多级目录的方法
2015/03/24 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
php适配器模式简单应用示例
2019/10/23 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
小程序实现分类页
2019/07/12 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
python实现数字炸弹游戏
2020/07/17 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
python实现计算器简易版
2020/12/17 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
军训自我鉴定怎么写
2014/02/13 职场文书
上班迟到检讨书
2014/09/15 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
2016年春节问候语
2015/11/11 职场文书