javascript实现前端分页功能

前⾔：今天给⼤家带来的是前端数据的分页功能，供⼤家参考，具体内容如下先上⼀波效果图展⽰：

直接上代码：这⾥使⽤的是JavaScript来实现关于代码详解都以注释的⽅式写在JavaScript⾥的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\":12347, \"pwd\":156 }, {

\"id\":7, \"pwd\":158 }, {

\"id\":\"vgwh\ \"pwd\":\"vgsya\" }, {

\"id\":1,

\"pwd\":\"tcv\" }, {

\"id\":256, \"pwd\":\"vtc0\" }];

//假设规定每页显⽰长度为3var 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+='';//每个页⾯按钮都绑定上⼀个点击事件 }}

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;ifor(var h in strs[i]){//遍历集合 str+=''+strs[i][h]+''; }

document.getElementById(\"table\").innerHTML+=''+str+'';//每循环⼀次添加⼀条数据 }}

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的注释⾥⾯，要是有什么疑问的，可以私我，好了，该说再见了，制作不易，各位看客点个赞再⾛呗以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。