前端简单实现分页功能，无后端静态官网，请求本地json列表

2023-11-10 11:21
文章标签 简单 实现 功能 json 请求 分页 前端 静态 列表 本地 frontend 官网 无后

本文主要是介绍前端简单实现分页功能，无后端静态官网，请求本地json列表，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近在做公司静态官网，无后端支持，新闻列表使用本地json数据形式获取，以下是简单的分页功能实现，写的比较仓促，后续再优化。

html部分：

       <div class="centerInContainer_page"><div class="centerInContainer_page1">上一页</div><div class="centerInContainer_page2"><!-- <div class="centerInContainer_page2_item centerInContainer_page2_item1">1</div> --></div><div class="centerInContainer_page3">下一页</div><div class="centerInContainer_page4">共<span class="centerInContainer_page_all"></span>页，每页 <spanclass="centerInContainer_page_item"></span>条</div></div>

js部分：

// 每页新闻条数
let newsNumItem = 5;$(function () {$.ajax({//请求方式为gettype: "GET",//json文件位置url: "../../../json/newsInfo.json",//返回数据格式为jsondataType: "json",//请求成功完成后要执行的方法success: function (res) {// 获取新闻条数const pages = Math.ceil(res.data.length / newsNumItem);// 每页条数$(".centerInContainer_page_item").text(newsNumItem);// 共？页$(".centerInContainer_page_all").text(pages);// 页码展示for (let i = 1; i <= pages; i++) {$(".centerInContainer_page2").append(`<div class="centerInContainer_page2_item centerInContainer_page2_item${i}">${i}</div>`);}// 当前页记录let pageIndex = 1;// 鼠标悬浮/离开样式for (let i = 1; i <= pages; i++) {$(`.centerInContainer_page2_item${i}`).mouseenter(function () {if (pageIndex != i) {$(`.centerInContainer_page2_item${i}`).css("backgroundColor","#0269B7");$(`.centerInContainer_page2_item${i}`).css("color", "#fff");}});$(`.centerInContainer_page2_item${i}`).mouseleave(function () {if (pageIndex != i) {$(`.centerInContainer_page2_item${i}`).css("backgroundColor","#fff");$(`.centerInContainer_page2_item${i}`).css("color", "#000");}});}//第一次加载 默认展示第一页$(`.centerInContainer_page2_item1`).css("backgroundColor", "#0269B7");$(`.centerInContainer_page2_item1`).css("color", "#fff");//对应新闻列表页码展示const dataShow = [];const dataAll = JSON.parse(JSON.stringify(res.data));for (let index in dataAll) {if (Number(index) >= 0 && Number(index) < newsNumItem) {dataShow.push(dataAll[index]);}}// 填充domfor (let item of dataShow) {$(".centerInContainer_list").append($(`     <div class="centerInContainer_list_item"><img src="${item.imgurlList}" alt=""class="centerInContainer_list_item_img"><div class="centerInContainer_list_item_info"><div class="centerInContainer_list_item_info1">${item.title}</div><div class="centerInContainer_list_item_info2"></div><div class="centerInContainer_list_item_info3">${item.info}</div><div class="centerInContainer_list_item_info4"><div class="centerInContainer_list_item_info4_left">${item.time}</div><a href="${item.linkDetail}"class="centerInContainer_list_item_info4_right">查看详情>></a></div></div></div>`));}// 页码点击for (let i = 1; i <= pages; i++) {$(`.centerInContainer_page2_item${i}`).click(function () {// 修改当前页记录pageIndex = i;// 页码按钮样式控制$(`.centerInContainer_page2_item${i}`).css("backgroundColor","#0269B7");$(`.centerInContainer_page2_item${i}`).css("color", "#fff");for (let j = 1; j <= pages; j++) {if (j != i) {$(`.centerInContainer_page2_item${j}`).css("backgroundColor","#ffffff");$(`.centerInContainer_page2_item${j}`).css("color", "#000");}}//对应新闻列表页码展示const dataShow = [];const dataAll = JSON.parse(JSON.stringify(res.data));for (let index in dataAll) {if (Number(index) + 1 > newsNumItem * (i - 1) &&Number(index) < newsNumItem * i) {dataShow.push(dataAll[index]);}}// 清空dom$(".centerInContainer_list").empty();// 填充domfor (let item of dataShow) {$(".centerInContainer_list").append($(`     <div class="centerInContainer_list_item"><img src="${item.imgurlList}" alt=""class="centerInContainer_list_item_img"><div class="centerInContainer_list_item_info"><div class="centerInContainer_list_item_info1">${item.title}</div><div class="centerInContainer_list_item_info2"></div><div class="centerInContainer_list_item_info3">${item.info}</div><div class="centerInContainer_list_item_info4"><div class="centerInContainer_list_item_info4_left">${item.time}</div><a href="${item.linkDetail}"class="centerInContainer_list_item_info4_right">查看详情>></a></div></div></div>`));}});}// 点击上一页$(".centerInContainer_page1").click(function () {if (pageIndex == 1) {return;}pageIndex--;// 页码按钮样式控制$(`.centerInContainer_page2_item${pageIndex}`).css("backgroundColor","#0269B7");$(`.centerInContainer_page2_item${pageIndex}`).css("color", "#fff");for (let j = 1; j <= pages; j++) {if (j != pageIndex) {$(`.centerInContainer_page2_item${j}`).css("backgroundColor","#ffffff");$(`.centerInContainer_page2_item${j}`).css("color", "#000");}}//对应新闻列表页码展示const dataShow = [];const dataAll = JSON.parse(JSON.stringify(res.data));for (let index in dataAll) {if (Number(index) + 1 > newsNumItem * (pageIndex - 1) &&Number(index) < newsNumItem * pageIndex) {dataShow.push(dataAll[index]);}}// 清空dom$(".centerInContainer_list").empty();// 填充domfor (let item of dataShow) {$(".centerInContainer_list").append($(`     <div class="centerInContainer_list_item"><img src="${item.imgurlList}" alt=""class="centerInContainer_list_item_img"><div class="centerInContainer_list_item_info"><div class="centerInContainer_list_item_info1">${item.title}</div><div class="centerInContainer_list_item_info2"></div><div class="centerInContainer_list_item_info3">${item.info}</div><div class="centerInContainer_list_item_info4"><div class="centerInContainer_list_item_info4_left">${item.time}</div><a href="${item.linkDetail}"class="centerInContainer_list_item_info4_right">查看详情>></a></div></div></div>`));}});// 点击下一页$(".centerInContainer_page3").click(function () {if (pageIndex == pages) {return;}pageIndex++;// 页码按钮样式控制$(`.centerInContainer_page2_item${pageIndex}`).css("backgroundColor","#0269B7");$(`.centerInContainer_page2_item${pageIndex}`).css("color", "#fff");for (let j = 1; j <= pages; j++) {if (j != pageIndex) {$(`.centerInContainer_page2_item${j}`).css("backgroundColor","#ffffff");$(`.centerInContainer_page2_item${j}`).css("color", "#000");}}//对应新闻列表页码展示const dataShow = [];const dataAll = JSON.parse(JSON.stringify(res.data));for (let index in dataAll) {if (Number(index) + 1 > newsNumItem * (pageIndex - 1) &&Number(index) < newsNumItem * pageIndex) {dataShow.push(dataAll[index]);}}// 清空dom$(".centerInContainer_list").empty();// 填充domfor (let item of dataShow) {$(".centerInContainer_list").append($(`     <div class="centerInContainer_list_item"><img src="${item.imgurlList}" alt=""class="centerInContainer_list_item_img"><div class="centerInContainer_list_item_info"><div class="centerInContainer_list_item_info1">${item.title}</div><div class="centerInContainer_list_item_info2"></div><div class="centerInContainer_list_item_info3">${item.info}</div><div class="centerInContainer_list_item_info4"><div class="centerInContainer_list_item_info4_left">${item.time}</div><a href="${item.linkDetail}"class="centerInContainer_list_item_info4_right">查看详情>></a></div></div></div>`));}});},});
});

css部分：

/* 分页 */
.centerInContainer_page {display: flex;justify-content: center;
}.centerInContainer_page1 {width: 1rem;height: 0.36rem;line-height: 0.36rem;background-color: #ffffff;border-radius: 0.04rem;border: solid 0.01rem #d6d6d6;text-align: center;cursor: pointer;margin-right: 0.24rem;
}.centerInContainer_page1:hover {background-color: #0269B7;color: #FFF;
}.centerInContainer_page2 {height: 0.36rem;margin-right: 0.14rem;display: flex;
}.centerInContainer_page2_item {width: 0.36rem;height: 0.36rem;line-height: 0.36rem;background-color: #ffffff;border-radius: 0.04rem;border: solid 0.01rem #d6d6d6;text-align: center;cursor: pointer;margin-right: 0.1rem;
}.centerInContainer_page3 {width: 1rem;height: 0.36rem;line-height: 0.36rem;background-color: #ffffff;border-radius: 0.04rem;border: solid 0.01rem #d6d6d6;text-align: center;cursor: pointer;margin-right: 0.24rem;
}.centerInContainer_page3:hover {background-color: #0269B7;color: #FFF;
}.centerInContainer_page4 {width: 1.8rem;height: 0.36rem;line-height: 0.36rem;background-color: #ffffff;border-radius: 0.04rem;border: solid 0.01rem #d6d6d6;text-align: center;/* cursor: pointer; */
}.centerInContainer_page4 span {color: #0269B7;font-weight: bolder;
}

这篇关于前端简单实现分页功能，无后端静态官网，请求本地json列表的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/382352。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

这是一道扩展欧几里得算法的简单应用题，这题是在湖南多校训练赛中队友ac的一道题，在比赛之后请教了队友，然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意：把题意转变下就变成了：求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点：求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个
阅读更多...
hdu2289（简单二分）

hdu2289（简单二分）

虽说是简单二分，但是我还是wa死了  题意：已知圆台的体积，求高度 首先要知道圆台体积怎么求：设上下底的半径分别为r1,r2,高为h,V = PI*(r1*r1+r1*r2+r2*r2)*h/3 然后以h进行二分 代码如下： #include<iostream>#include<algorithm>#include<cstring>#include<stack>#includ
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2