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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
EsLint入门学习教程
Feb 17 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
PHP实现简单日历类编写
2020/08/28 PHP
使用js显示当前时间示例
2014/03/02 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python get获取页面cookie代码实例
2018/09/12 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
python中什么是面向对象
2020/06/11 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
Linux的文件类型
2016/07/05 面试题
幼师专业毕业生自荐信
2013/09/29 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
中文专业求职信
2014/06/20 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
Python anaconda安装库命令详解
2021/10/16 Python