准备一个获取数据的接口

–注–：页面可能有点简陋，我们这里主要写如何操作dom来实现分页的功能。
这里我是用node搭建了一个简易的服务器，用来给前端发送数据：

const express = require("express");
const app = express();
// 解决跨域
const cors = require('cors')
app.use(cors());
// 这里是我们的数据
let user = [{name:"张三"},{name:"李四"},{name:"王二"},{name:"李五"},{name:"make"},{name:"two"},{name:"three"},{name:"four"},{name:"five"},{name:"six"},{name:"ele"},{name:"poi"},{name:"Yheii"},{name:"Ojjn"},{name:"Pdwd"},{name:"Iuijn"},{name:"Wfaf"},{name:"Ldad"},{name:"IOp"},{name:"NKO"},{name:"1122"},{name:"3344"},{name:'5566'},{name:"7788"},{name:"9900"},{name:"ooop"},{name:"164d"},{name:'164d4w'},{name:"dwad1"},{name:"pkoih"},{name:"ooop"},{name:"164d"},{name:'164d4w'},{name:"dwad1"},{name:"pkoih"}
]
app.get("/user",(req,res)=>{console.log("访问呢");let userList = JSON.stringify(user)res.send(userList);
})
app.listen(80,()=>{console.log("run serve http://localhost");
})

接下来就是写我们前端的页面（页面比较简陋）：

<style>* {margin: 0;padding: 0;}li {list-style: none;}#All {display: flex;flex-direction: column;justify-content: center;}#List ul {display: flex;flex-direction: column;align-items: center;height: 100px;}#Page {display: flex;align-items: center;justify-content: center;}#Page ul {display: flex;}#Page ul li {text-align: center;width: 30px;}.active {background-color: aqua;}#Page h5 {cursor: pointer;background-color: antiquewhite;width: 70px;text-align: center;border-radius: 5px;}#pages li {cursor: pointer;border-radius: 5px;}
</style><body><div id="All"><div id="List"><ul id="user"></ul></div><div id="Page"><h5 id="previousPage">上一页</h5><ul id="pages"></ul><h5 id="nextPage">下一页</h5></div></div>
</body>

效果：

接下来就是我们逻辑的实现（详细看注释）：

// 定义一个全局储存获取到的数据let data = null;// 立即执行函数(function () {// 获取接口数据$.ajax({async: false,url: "http://localhost/user",type: "get",success: function (res) {let da = JSON.parse(res)data = da;},error: function (err) {console.log(err);}})// 获取分页page();// 开始展示的数据beginData();// 当点击不同页码时，刷新数据changeDate();// 隐藏页码hidePage();// 点击下一页nextPage();// 点击上一页previousPage();})()// 获取分页页数function page() {let pages = document.getElementById("pages");// 页码数let page = data.length / 5;// 先展示所有的页码数for (let i = 1; i <= page; i++) {let li = document.createElement("li")li.innerHTML = i;pages.appendChild(li);}}// 只显示4个页码，其余隐藏function hidePage() {let pages = document.getElementById("pages");let chiNode = pages.children;for (let i = 0; i < chiNode.length; i++) {// 隐藏超过4个的页码if (i > 3) {chiNode[i].style.display = "none";}}}// 点击下一页时function nextPage() {let pages = document.getElementById("pages");let nextPage = document.getElementById("nextPage");let chiNode = pages.children;nextPage.addEventListener("click", function () {try {// 显示下一页码for (let i = chiNode.length - 1; i > 0; i--) {if (chiNode[i].style.display != "none") {chiNode[i + 1].style.display = "block";}}// 隐藏开头的页码for (let i = 0; i < chiNode.length; i++) {if (chiNode[i].style.display != "none") {chiNode[i].style.display = "none";break;}}} catch (error) {console.log("到底啦");}})}// 点击上一页时function previousPage() {let pages = document.getElementById("pages");let previousPage = document.getElementById("previousPage");let chiNode = pages.children;previousPage.addEventListener("click", function () {try {// 显示上一页码for (let i = 0; i < chiNode.length; i++) {if (chiNode[i].style.display != "none") {chiNode[i - 1].style.display = "block";}}// 隐藏结尾数据for (let i = chiNode.length - 1; i >= 0; i--) {if (chiNode[i].style.display != "none") {chiNode[i].style.display = "none";break;}}} catch (error) {console.log("到头啦");}})}// 一开始展示五条数据,并页码1选中function beginData() {// 显示前五条数据let user = document.getElementById("user");for (let i = 0; i < 5; i++) {let li = document.createElement("li");li.innerHTML = data[i].name;user.appendChild(li);}// 选中第一条页码,给他加上activelet pages = document.getElementById("pages");let li = pages.children;li[0].classList.add("active");}// 当点击不同页数，展现对应数据function changeDate() {// 获取页码元素let pages = document.getElementById("pages");// 获取列表元素let user = document.getElementById("user");let node = pages.children;for (let i = 0; i < node.length; i++) {node[i].addEventListener("click", function () {// 在刷新下一个页面数据的时候，先将之前的数据清楚然后覆盖之前的数据$("#user").empty();for (let i = 0; i < node.length; i++) {node[i].classList.remove("active")}node[i].classList.add("active")let pageNum = Number(node[i].textContent);// 数据开始的位置索引let headIndex = (pageNum - 1) * 5;// 数据结束时的索引let lastIndex = pageNum * 5;// 为当前选中页码添加对应数据for (let i = headIndex; i < lastIndex; i++) {let li = document.createElement("li");li.innerHTML = data[i].name;user.appendChild(li);}})}}

总体效果演示：

这里我们只是做了分页操作的一种实现方式，实现分页功能还有其他很多种方式。

练手：原生js（部分jquery）写一个前端页面分页功能相关推荐

原生js 基于canvas写一个简单的前端截图工具
先看效果 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
帮我写一个前端页面,使用react，组件使用antd,页面中需要有一个表格,表格包含序号、名称、创建日期。表格可以分页显示...
好的,下面是一个使用 React 和 Antd 实现的带有分页的表格的示例: import { Table, Pagination } from 'antd';const columns = [{ti ...
原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡话不多说,先给各位看一下功能图: 好了,下边 ...
html鼠标点击有手势出来,用原生js+css3撸的一个下拉手势事件插件
; (function () { var DropDown = function (dropId = 'dropDwon', distance = 60, callBack = () => {} ...
html——原生js与jquery创建元素节点区别
学习完静态样式之后开始学习动态创建添加html元素,总结了下原生js与jquery生成元素区别. 1.javascript创建元素创建select var select = document.cre ...
自己用jQuery写一个瀑布流
自己用jQuery写一个瀑布流前言这个月一直在忙工作.一直没有机会学习新的知识.前两天,突然想写一个瀑布流代码.倒不是找不到瀑布流代码.而是我想自己练练脑子. 首先,先考虑思路.所有的图片,全部采 ...
原生js与jQuery显示隐藏div的几种方法
原生Js与jQuery显示隐藏div的几种方法简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一首先是进行js演示和讲解. 首先是display的方法 ...
jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ...
html 对勾单选框,利用原生js和jQuery实现单选框的勾选和取消操作的方法
根据以下的Demo,大概就可以看的明白 Demo: window.onload = function(){ var dom_a = document.getElementById('a1'); var ...

练手：原生js（部分jquery）写一个前端页面分页功能

准备一个获取数据的接口

这里我们只是做了分页操作的一种实现方式，实现分页功能还有其他很多种方式。

练手：原生js（部分jquery）写一个前端页面分页功能相关推荐

最新文章

热门文章