JS实现分页功能

最新推荐文章于 2024-05-03 16:02:30 发布

程序员-刘华强

最新推荐文章于 2024-05-03 16:02:30 发布

阅读量452

点赞数 13

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/woliuhuaqiangla/article/details/135517396

版权

分页功能是一个很好玩的功能，在很多浏览器的底部都会有显示分页的效果，想去第几页去第几页

今天就来做一下分页功能。

实现效果如下：

渲染函数代码如下：

//渲染函数，函数名为fn
function fn() {
	//计算数据的总数量除以当前页数据的数量
	num = Math.ceil(ppt.length) / row
	//声明一个空字符串，渲染第几页
	let etr = ``
	//声明一个空字符串，渲染页数
	let atr = ``
	//声明一个空字符串，渲染内容
	let str = ``
	//for循环整个数据	
	for (let i = row * page; i < row * (page + 1); i++) {
		if (ppt[i] != undefined) {
			str += `<p>
					<span>${i+1}</span>
					<span>${ppt[i].name}</span>
					<span>${ppt[i].money}</span>
					<span>${ppt[i].expend}</span>
				</p>`
		}
	}
	for (let i = 0; i < num; i++) {
		if (page == i) {
			etr += `<p>
					<span>现在</span>
					<strong>${i+1}</strong>
					<span>页/</span>
					<strong>${Math.ceil(num)}</strong>页
				</p>`
			atr += `<p onclick="tt(${i})" style="color:red">${i+1}</p>`;
		} else {
			atr += `<p onclick="tt(${i})">${i+1}</p>`;
		}
	}
	div1.innerHTML = etr
	div.innerHTML = str
	ye.innerHTML = atr
}

点击事件代码如下：


//上一页点击事件
function s() {
	if (page > 0) {
		page--
	} else {
		alert("到第一页了")
	}
	fn()
}

//下一页点击事件
function x() {
	if (page < num - 1) {
		page++
	} else {
		alert("到最后一页了")
	}
	fn()
}

//页数点击事件
function tt(arr) {

	page = arr
	console.log(arr);
	fn()
}

//每页几条点击事件
function f() {
	let sel = document.getElementById("sel").value
	row = sel
	page = 0
	fn()
}

回车事件代码如下：

//回车事件
input.onkeydown = function(e) { // 回车提交表单
	// 兼容FF和IE和Opera
	var theEvent = window.event || e;
	var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
	if (code == 13) {
		let inputt = document.getElementById("input").value
		console.log(inputt);
		if (inputt > 0 && inputt < num + 1 && inputt != "" && inputt == parseInt(inputt)) {
			page = inputt - 1
		} else {
			alert("没有此页面")
		}
		input.value = ""
	}
	fn()
}