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 相关文章推荐
基于jquery的跨域调用文件
Nov 19 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
javascript实现倒计时关闭广告
Feb 09 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
PHP开发文件系统实例讲解
2006/10/09 PHP
php at(@)符号的用法简介
2009/07/11 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
php类自动加载器实现方法
2015/07/28 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
浅谈js闭包理解
2019/04/01 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
js实现验证码功能
2020/07/24 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
python中ConfigParse模块的用法
2014/09/29 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
几个SQL的面试题
2014/03/08 面试题
大学军训感想
2014/02/12 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
公司租房协议书
2014/10/14 职场文书
个人总结格式范文
2015/03/09 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技