javascript实现前端分页功能


Posted in Javascript onNovember 26, 2020

前言:今天给大家带来的是前端数据的分页功能,供大家参考,具体内容如下

先上一波效果图展示:

javascript实现前端分页功能

直接上代码:这里使用的是JavaScript来实现

关于代码详解都以注释的方式写在JavaScript里的

HTML:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>分页</title>
 <link rel="stylesheet" href="css/limitFace.css" rel="external nofollow" >
 </head>
 <body>
 <div class="all">
  <table id="table">
  
  </table>
  <div id="inputs">
  
  </div>
 </div>
 <script src="js/limitFace.js"></script>
 </body>
</html>

CSS:

*{
 padding: 0;
 margin: 0;
 font-size: 20px;
}
.all{
 width: 100%;
 height: 100vh;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}
/*偷懒才用的id*/
#inputs input{
 width: 100px;
 height: 50px;
 background-color: white;
}
#table{
 width: 90%;
}
tr{
 width: 100%;
}
td{
 text-align: center;
 width: 50%;
 height: 10vh;
 border: 1px solid black;
}

JS:

//一下数据为模拟集合,个人理解js中的集合就是将对象放进数组
var strs = [
 {
 "id":123,
 "pwd":456
 },
 {
 "id":456,
 "pwd":123
 },
 {
 "id":4681,
 "pwd":9815
 },
 {
 "id":471,
 "pwd":4981
 },
 {
 "id":1234789,
 "pwd":156
 },
 {
 "id":789,
 "pwd":158
 },
 {
 "id":"vgwh",
 "pwd":"vgsya"
 },
 {
 "id":1,
 "pwd":"tcv"
 },
 {
 "id":256,
 "pwd":"vtc0"
 }
];
//假设规定每页显示长度为3
var len = 3;
//确认该集合会被分成几页,分成几页就代表需要几个页面按钮,封装封装方便多次运用
function limits(){
 var countLim = Math.ceil(strs.length/len);//余数也算是一页,这里用向上取整
 //确认页面按钮个数,进行循环显示到页面上
 document.getElementById("inputs").innerHTML='';//清空一下
 for(var i=1;i<=countLim;i++){
 document.getElementById("inputs").innerHTML+='<input type="button" value="'+i+'" onclick="limitinput(this)"/>';//每个页面按钮都绑定上一个点击事件
 }
}
var choose = 0;//创建一个全局变量用来保存当前处于第几个页面
//点击按钮获取当前按钮的值进行选择当前table是第几页数据
function limitinput(ids){
 choose = ids.value;
 tablestr(choose);//刷新table数据
 limits();//刷新页面按钮
  ids.style.backgroundColor='red';//当前点击的页面按钮背景颜色改变为红色
 liminputcolor(choose);//页面按钮变色
}
//通过当前页面按钮和页面数据长度将数据放进table内,封装封装!!!必须封装
function tablestr(num){//num是指当前哪个页面
 var num1 = (num-1)*len;//确定循环开始的集合下标
 var num2 = num*len;//确定循环结束的结束下标
 document.getElementById("table").innerHTML='';//清空一下
 for(var i=num1;i<num2;i++){//遍历数组
 var str = '';
 for(var h in strs[i]){//遍历集合
  str+='<td>'+strs[i][h]+'</td>';
 }
 document.getElementById("table").innerHTML+='<tr>'+str+'</tr>';//每循环一次添加一条数据
 }
}
function liminputcolor(choose){
 document.getElementById("inputs").childNodes[choose-1].style.backgroundColor="red";
}
//初始化,当前页面显示为第一页
limits();//页面按钮生成
document.getElementById("inputs").childNodes[0].style.backgroundColor="red";//第一个按钮的背景颜色为红色
tablestr(1);//table数据显示
/*
到这里就结束了,但是!!!这些都是被封装好了的,意思就是说,在最开始的时候这就是通用的做法;
最开始的数据就是在模拟后端的集合,也就是说,不论你后端传递给前端什么集合都可以实现分页功能
*/

后言:本次博文就到这里了,多的话也没说啥,解释都在js的注释里面,要是有什么疑问的,可以私我,好了,该说再见了,制作不易,各位看客点个赞再走呗

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

Javascript 相关文章推荐
JQuery 常用操作代码
Mar 14 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 #Javascript
Vue组件生命周期运行原理解析
Nov 25 #Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 #Vue.js
在Vue中使用mockjs代码实例
Nov 25 #Vue.js
javascript实现左右缓动动画函数
Nov 25 #Javascript
JavaScript缓动动画函数的封装方法
Nov 25 #Javascript
js实现缓动动画
Nov 25 #Javascript
You might like
PHP5 面向对象(学习记录)
2009/12/02 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
python广度优先搜索得到两点间最短路径
2019/01/17 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
python如何实现单链表的反转
2020/02/10 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
生产管理的三大手法
2013/11/11 职场文书
运动会广播稿500字
2014/01/28 职场文书
八一建军节感言
2014/02/28 职场文书
移风易俗倡议书
2014/04/15 职场文书
经验交流材料格式
2014/12/30 职场文书
办公用品质量保证书
2015/05/11 职场文书
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
Nginx安装配置详解
2022/06/25 Servers
Redis主从复制操作和配置详情
2022/09/23 Redis