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 相关文章推荐
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
Jquery 获得服务器控件值的方法小结
May 11 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 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
PHP也能干大事 随机函数
2015/04/14 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
详解Anaconda 的安装教程
2020/09/23 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
硕士研究生求职自荐信范文
2014/03/11 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
环境卫生标语
2014/06/09 职场文书
应届毕业生自荐书
2014/06/18 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
2015年质检工作总结
2015/05/04 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
提档介绍信范文
2015/10/22 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB