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

最新推荐文章于 2023-04-26 15:42:55 发布

指甲盖挠黑板

最新推荐文章于 2023-04-26 15:42:55 发布

阅读量454

点赞数 2

文章标签：静态网站分页 JSON JavaScript 前端开发

本文链接：https://blog.csdn.net/guochangheng/article/details/125319719

版权

最近在做公司静态官网，无后端支持，新闻列表使用本地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>页，每页 <span
                        class="centerInContainer_page_item"></span>条</div>
            </div>

js部分：

// 每页新闻条数
let newsNumItem = 5;

$(function () {
	$.ajax({
		//请求方式为get
		type: "GET",
		//json文件位置
		url: "../../../json/newsInfo.json",
		//返回数据格式为json
		dataType: "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]);
				}
			}
			// 填充dom
			for (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();
					// 填充dom
					for (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();
				// 填充dom
				for (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();
				// 填充dom
				for (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;
}