javascript实现前端分页效果


Posted in Javascript onJune 24, 2020

本文实例为大家分享了javascript实现前端分页效果的具体代码,供大家参考,具体内容如下

需求:实现分页请求表格数据,ajax暂时没写,只写了分页的功能。

效果图:

当页数是第一页的时候,首页和向前那个按钮处于禁止点击的状态

javascript实现前端分页效果

各个按钮都正常的状态

javascript实现前端分页效果

当页数是第一页的时候,首页和向前那个按钮处于禁止点击的状态

javascript实现前端分页效果

各部分的代码如下:

html部分:

<!-- 分页 -->
 <div class="pageBox">
 <div class="pageTotal">共<span id="dataLength">88</span>条</div>
 <div class="pageContent">
  <button class='firstPage'>首页</button>
  <button class="prevPage"></button>
  <button class="showPage"></button>
  <button class="nextPage"></button>
  <button class="lastPage">尾页</button>
 </div>
 <div class="selectSize">
  <div><span class="numSelect">10</span> <span>条/页</span></div>
  <div class="icona"></div>
 </div>
 <!-- <div id="test1" style="display: inline-block;margin-left: 210px;"></div> -->
 <div class="goPage"><span>跳至</span><input type="text" id="goPageInp"><span>页</span></div>
 <ul class="pageSelectShow">
  <li data-num="10">10条/页</li>
  <li data-num="20">20条/页</li>
  <li data-num="50">50条/页</li>
  <li data-num="100">100条/页</li>
 </ul>
 </div>

CSS部分:

* {
  padding: 0;
  margin: 0;


 }

 body,
 html {
  width: 100%;
  height: 100%;
 }


 .pageBox{
  width: 60%;
  margin-left: 20%;
  margin-top: 200px;
  position: relative;
  height: 50px;

 }
 .pageBox>div{
  float: left;
  margin: 0 10px;
 }
 .pageContent>button{
  float: left;
  margin: 0px 4px;
  border: none;
  outline: none;
 }
.goPage,.pageTotal{
 height: 30px;
 vertical-align: middle;
 font-size: 14px;

}
.goPage{
 right: 50px;
}
.goPage span{
 display: inline-block;
 color: #999999;
 
}
.goPage input{
 display: inline-block;
 width: 50px;
 height: 30px;
 margin: 0px 5px;
 border: none;
 border: 1px solid #ccc;
 border-radius: 4px;
 text-align: center;
}
.pageTotal{
 left: 50px;
 line-height: 30px;
 font-size: 15px;
 color: #999;
}
.pageTotal span{
 margin: 0 3px;
 color: #333;
}

.selectSize{
 width: 100px;
 height: 30px;
 border: 1px solid #ccc;
 border-radius: 4px;
 font-size: 14px;
 text-align: center;
 line-height: 30px;
 vertical-align: middle;
 position: relative;

}
.selectSize>div{
 float: left;
 margin-left: 5px;
}
.icona{
 width: 20px;
 height: 20px;
 background-image: url('./down.png');
 background-size: 100% 100%;
 background-position: center center;
 margin-top: 5px;
 cursor: pointer;
 position: absolute;
 right: 6px;

}
.pageSelectShow{
 width: 100px;
 height: 162px;
 border: 1px solid #ccc;
 overflow-y: auto;
 position: absolute;
 top: -170px;
 left: 400px;
 list-style: none;
 font-size: 15px;
 display: none;
 background: #fff;
 border-radius: 3px;
}
.pageSelectShow li{
 width: 100%;
 height: 40px;
 line-height: 40px;
 text-align: center;
 cursor: pointer;

}
.pageContent>div{
 cursor: pointer;
 height: 30px;

}
.firstPage,.lastPage{
 width: 60px;
}
.firstPage,.lastPage,.showPage{
 background:rgb(67, 133, 255);
 color: #fff;
 font-size: 15px;
 line-height: 30px;
 text-align: center;
 border-radius: 4px;
}
.showPage{
 width: 40px;
}
.prevPage,.nextPage{
 height: 30px;
 width: 50px;
 border: 1px solid #ccc;
 border-radius: 4px;
 background-repeat: no-repeat;
 background-position: center center;
 background-size: 20px 20px;

}
.prevPage{
 background-image: url('./prev.png');
 
}
.nextPage{
 background-image: url('./next.png');
}
.nowtouch{
 color:#009E94
}

JS代码:

//点击显示选择条数的div
 var showFlag = true;
 var numcount = 1;//默认第一页
 var dataLength =10000;
 $('#dataLength').text(dataLength);
 var allCount = Math.ceil(dataLength / 10);
 console.log(allCount);
 //分页跳转
 $('.showPage').text(numcount)
 if (numcount === 1) {
  firstDis(true, 'not-allowed', '0.5')
 }
 if (numcount === allCount) {
  lastDis(true, 'not-allowed', '0.5')

 }
 
 $('.icona').click(function () {
  if (showFlag) {
  $('.pageSelectShow').css({
   'display': 'block'
  });
  $('.icona').css({
   'background-image': 'url(' + './up.png' + ')'
  })
  showFlag = !showFlag;

  } else {
  $('.pageSelectShow').css({
   'display': 'none'
  })
  $('.icona').css({
   'background-image': 'url(' + './down.png' + ')'
  })
  showFlag = !showFlag;
  }
 })
 //点击选择条数
 //

 $('.pageSelectShow li').click(function (e) {
  console.log(e.target.innerHTML)
  var countLength = e.target.innerHTML
  for(var i = 0; i < countLength.length;i++){
  console.log(countLength[i])
  }
  $('.numSelect').text($(this).data('num'));
  allCount = Math.ceil(dataLength / e.target.dataset.num);
  
  if(allCount == 1){
  firstDis(true, 'not-allowed', '0.5');
  lastDis(true, 'not-allowed', '0.5')
  }else{
  firstDis(true, 'not-allowed', '0.5')
    lastDis(false, 'pointer', '1')
  }
  $(this).addClass('nowtouch').siblings().removeClass('nowtouch')
  $('.pageSelectShow').css({
  'display': 'none'
  })
  $('.icona').css({
  'background-image': 'url(' + './down.png' + ')'
  })
 })

 //点击首页
 $('.firstPage').click(function () {
  numcount = 1;
  $('.showPage').text(numcount);
  firstDis(true, 'not-allowed', '0.5')
  lastDis(false, 'pointer', '1')
 })
 //点击上一页
 $('.prevPage').click(function () {
  var prevNum = Number($('.showPage').text());
  prevNum--;
  $('.showPage').text(prevNum);
  if (prevNum == numcount) {
  firstDis(true, 'not-allowed', '0.5')
  } else {
  lastDis(false, 'pointer', '1')
  }
 })
 //点击下一页
 $('.nextPage').click(function () {
  var prevNum = Number($('.showPage').text());
  prevNum++
  firstDis(false, 'pointer', '1')
  $('.showPage').text(prevNum);
  if (prevNum == allCount) {
  lastDis(true, 'not-allowed', '0.5')
  } else {
  lastDis(false, 'pointer', '1')
  }
 })
 //点击尾页
 $('.lastPage').click(function () {
  numcount = allCount
  $('.showPage').text(allCount);
  firstDis(false, 'pointer', '1')
  lastDis(true, 'not-allowed', '0.5')
 })
 //当页码为1,禁止点击的函数
 function firstDis(boolVal, cursorVal, opacityVal) {
  $('.firstPage').attr('disabled', boolVal);
  $('.firstPage').css({
  'cursor': cursorVal,
  'opacity': opacityVal
  })
  $('.prevPage').attr('disabled', boolVal);
  $('.prevPage').css({
  'cursor': cursorVal,
  'opacity': opacityVal
  })
 }
 //当页码为20,禁止点击的函数
 function lastDis(boolVal, cursorVal, opacityVal) {
  $('.lastPage').attr('disabled', boolVal);
  $('.lastPage').css({
  'cursor': cursorVal,
  'opacity': opacityVal
  })
  $('.nextPage').attr('disabled', boolVal);
  $('.nextPage').css({
  'cursor': cursorVal,
  'opacity': opacityVal
  })
 }
 //键盘事件
 $('#goPageInp').on('keydown', function (e) {
  if (e.keyCode == 13) {
  var vals = e.target.value;
  console.log(Number(vals));
  $(this).blur();
  if(Number(vals) && Number(vals) <=allCount ){
   $('.showPage').text(vals);
  if (vals == allCount) {
   firstDis(false, 'pointer', '1')
   lastDis(true, 'not-allowed', '0.5')
  }
  if (vals == numcount) {
   lastDis(false, 'pointer', '1')
   firstDis(true, 'not-allowed', '0.5')
  }
  e.target.value = ''
  }else{
   alert('输入错误');
   e.target.value = ''
  }
  
  
  }
})

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

Javascript 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
JS实现多选框的操作
Jun 24 #Javascript
微信小程序实现发微博功能的示例代码
Jun 24 #Javascript
JavaScript实现答题评分功能页面
Jun 24 #Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 #Javascript
JS实现简单打字测试
Jun 24 #Javascript
微信小程序实现多选框功能的实例代码
Jun 24 #Javascript
JS实现电脑虚拟键盘的操作
Jun 24 #Javascript
You might like
Parse正式发布开源PHP SDK
2014/08/11 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
JavaScript中this详解
2015/09/01 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
用js编写留言板
2020/03/17 Javascript
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
详解python如何引用包package
2020/06/07 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
python 对xml解析的示例
2021/02/27 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
优秀党员主要事迹
2014/01/19 职场文书
社区交通安全实施方案
2014/03/22 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
婚宴来宾致辞
2015/07/28 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python