使用js来实现分页功能

分页在网页上是一个很常见的功能，今天我们来实现一个人物列表，包含了分页的功能，效果如下：

代码可以参考，但是自己也要去理解一下代码中的意思，不要直接cv以后就什么都不管了，这样对自己是没有任何效果的，边写边看，对自己会有很大帮助的！！！

好了~话不多说，直接上代码吧

css代码如下：

<style>.box{margin-left: 20%;width: 60%;}table{margin: 20px;border: 0.5px solid;}td{width: 5rem;height: 2rem;text-align: center;border: 0.5px solid;}th{width: 100%;height: 1.5rem;border: 0.5px solid;}.foot{margin-left: 25px;width: 90%;display: flex;top: 17rem;}.foot-put input{width: 12px;height: 12px;}.box0{display: flex;}.foot-put{display: flex;margin: 0 10px;}.span{display: flex;}.foot-put0{margin: 0px 10px;line-height: 30px;color: cadetblue;}.foot-put0 input{margin: 0 6px;}.span span{text-align: center;line-height: 30px;display: inline-block;width: 30px;height: 30px;margin: 0 5px;background-color: aqua;border: 1px solid;border-radius: 10%;}</style>

html代码如下：

<div class="box"><table cellspacing = "0"><thead><tr><th colspan="5">&#8619人物志&#8620</th></tr><tr><td>id</td><td>姓名</td><td>年龄</td><td>身份</td><td>朝代</td></tr></thead><tbody><tr><td>1</td><td>姓名</td><td>年龄</td><td>技能</td><td>学历</td></tr></tbody></table><div class="foot"><div class="box0"><button>上一页</button><div class="span"><span onclick="ac(0)">1</span></div><button>下一页</button></div><div class="foot-put"><div class="foot-put0">到第<input type="text" value="1">页</div><button>确定</button></div></div></div>

js代码如下：

（json数据可以自己随便写一些）

//获取标签
let tbody = document.getElementsByTagName('tbody')[0];let input = document.getElementsByTagName('input')[0];let box0 = document.getElementsByClassName('box0')[0];let button = box0.getElementsByTagName('button');let span = document.getElementsByClassName('span')[0];console.log(input.value)let num = 5;//定义每页最多5条数据let k = 0;//定义从第几页开始显示let data;let xml = new XMLHttpRequest();xml.open('get','js/分页n.json');//获取json数据xml.send();xml.onreadystatechange = function(){if(xml.readyState == 4 && xml.status == 200){let text = xml.responseText;data = JSON.parse(text);fn();//调用函数}}let s;function fn(){s = Math.ceil(data.length / num);let str = '';for(let i = k * num; i < (k+1) * num ; i++){if(data[i] != undefined){// arr.push(data[i]);str += "<tr>"+"<td>"+ data[i].id +"</td>"+"<td>"+ data[i].name +"</td>"+"<td>"+ data[i].age +"</td>"+"<td>"+ data[i].ident +"</td>"+"<td>"+ data[i].edu +"</td>"+"</tr>"}}tbody.innerHTML = str;}button[0].onclick = function(){//点击事件，点击退页面if(k > 0){k--;fn();}}button[1].onclick = function(){//点击页面+1if(k < s-1){k++;fn();}}let st = '';for(let i = 0; i <= s-1; i++){st += '<span onclick="ac('+ i +')">'+ (i+1) +'</span>'}span.innerHTML = st;function ac(a){k = a;fn();}

json数据：

[{"id" : 1,"name" : "张三","age" : 25,"ident" : "法外狂徒","edu" : "中国"
},{"id" : 2,"name" : "李四","age" : 36,"ident" : "乞丐","edu" : "元末"
},{"id" : 3,"name" : "王五","age" : 23,"ident" : "间谍","edu" : "民国"
},{"id" : 4,"name" : "赵六","age" : 18,"ident" : "刺客","edu" : "战国末期"
},{"id" : 5,"name" : "岳飞","age" : 23,"ident" : "民族英雄","edu" : "南宋"
},{"id" : 6,"name" : "霍去病","age" : 23,"ident" : "国家英雄","edu" : "汉朝"
},{"id" : 7,"name" : "李靖","age" : 23,"ident" : "军神","edu" : "唐朝"
},{"id" : 2,"name" : "李四","age" : 36,"ident" : "乞丐","edu" : "元末"
},{"id" : 2,"name" : "李四","age" : 36,"ident" : "乞丐","edu" : "元末"
},{"id" : 2,"name" : "李四","age" : 36,"ident" : "乞丐","edu" : "元末"
},{"id" : 2,"name" : "李四","age" : 36,"ident" : "乞丐","edu" : "元末"
},{"id" : 2,"name" : "李四","age" : 36,"ident" : "乞丐","edu" : "元末"
},{"id" : 2,"name" : "李四","age" : 36,"ident" : "乞丐","edu" : "元末"
},{"id" : 2,"name" : "李四","age" : 36,"ident" : "乞丐","edu" : "元末"
},{"id" : 2,"name" : "李四","age" : 36,"ident" : "乞丐","edu" : "元末"
},{"id" : 2,"name" : "李四","age" : 36,"ident" : "乞丐","edu" : "元末"
},{"id" : 2,"name" : "李四","age" : 36,"ident" : "乞丐","edu" : "元末"
}]

使用js来实现分页功能相关推荐

[Ext JS 4] Grid 实战之分页功能
前言分页功能的实现有两种途径: 一种是服务端分页方式, 也就是web客户端传递页码参数给服务端,服务端根据页面参数返回指定条数的数据.也就是要多少取多少.这种方式比较适合Grid 的数据量很大,需 ...
用js实现分页功能以及利用xml实现分页功能——数据岛
对于数据显示的分页,现在大多是直接通过数据库的动态读取来控制分页,这种方式相比js分页来说,效率低下.采用js分页,能够很好的控制数据的显示.目前大多是采用先预取全部的结果集,然后根据当前页数(pag ...
练手：原生js（部分jquery）写一个前端页面分页功能
准备一个获取数据的接口 –注–:页面可能有点简陋,我们这里主要写如何操作dom来实现分页的功能. 这里我是用node搭建了一个简易的服务器,用来给前端发送数据: const express = req ...
分页技巧_实现第一个分页功能（回复列表中的分页）
分页技巧_实现第一个分页功能(回复列表中的分页) ======================================== 假设共25条数据,每页显示10条,则共3页 first max - ...
think php ajax分页,thinkPHP5框架实现基于ajax的分页功能示例
本文实例讲述了thinkPHP5框架实现基于ajax的分页功能.分享给大家供大家参考,具体如下: 最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法首先看一下tp5 ...
python嵌入html_Python odoo中嵌入html简单的分页功能
在odoo中,通过iframe嵌入 html,页面数据则通过controllers获取,使用jinja2模板传值渲染 html页面分页内容,这里写了判断逻辑首页 {% if current_page ...
java jdbc标签jsp_jsp+servlet+javabean+jdbc实现增删改查和分页功能案例源码
[实例简介] 客户管理案例 1.目的:总结JDBC,和Servlet JSP结合到一起. 2.开发中的一些小技巧. 3.客户管理平台功能 * 添加客户 * 查询所有的客户的信息 * 修改客户信息 * ...
bootstraptable控制分页_bootstrap-table后端分页功能完整实例
本文实例讲述了bootstrap-table后端分页功能.分享给大家供大家参考,具体如下: 使用bootstrap-table实现后台分页插件资源点击此处. 引用以下css 引用以下js html ...
[Beego] [bootstrap-paginator]实现分页功能
说明在开发中分页功能几乎是必不可少的一项功能,使用beego框架开发时,就遇到了分页功能的需求.可能是之前版本并不支持,我发现有很多自己实现的分页功能的封装,在阅读了官方源码时,我发现了分页功能的封 ...

使用js来实现分页功能

使用js来实现分页功能相关推荐

最新文章

热门文章