前端分页(详细步骤)
一、思路1.设置全局变量,当前页,总页数,总条数,每页显示多少条,所有页数据,当前页数据,start(总数据开始截取位置)、end(总数据结束截取位置)2.调用接口,请求到所有的数据后,改变相应的全局变量3.通过对总数据进行filter过滤得到当前页数据,然后把数据渲染到表格上,4.其他操作:如页码的点击、左右箭头的点击都会改变当前页的内容,就是改变相应全局变量,然后重新过滤当前页数据,然后进渲染
·
一、思路
1.设置全局变量,当前页,总页数,总条数,每页显示多少条,所有页数据,当前页数据,start(总数据开始截取位置)、end(总数据结束截取位置)
2.调用接口,请求到所有的数据后,改变相应的全局变量
3.通过对总数据进行filter过滤得到当前页数据,然后把数据渲染到表格上,
4.其他操作:如页码的点击、左右箭头的点击都会改变当前页的内容,就是改变相应全局变量,然后重新过滤当前页数据,然后进渲染到页面上
二、具体步骤
1.定义变量
//当前页
let nowPage = 1
// 每页显示多少条
let pageCount = 2
// 总页数
let totalPage
// 总条数
let totalNumber
// 总内容
let totalArr
// 当前页内容
let pageArr
//总数据过滤开始的位置
let start
//总数据过滤结束的位置
let end
//判断搜索还是展现数据(不用管)
let flag = true
2.调用接口
//基于jQuery
$(function() {
get_cxc_table_data()
})
// 请求数据
function get_cxc_table_data() {
flag = true
$.ajax({
url: BASEURL + TEAMCONTRACTLIST,
type: 'post',
success(res) {
//改变相应的全局变量
//总条数
totalNumber = res.data.length
//所有数据
totalArr = res.data
//渲染表格的方法
addTable(totalArr, nowPage, pageCount)
// 创建页数的方法
addPage(totalArr.length)
}
})
}
3.渲染表格
// 动态添加到table表格中
//@params arr:渲染的数据
//@params now:当前页
//@params count:每页显示几条数据
function addTable(arr, now, count) {
// 将之前的表格清空
$('#teamList').html('')
//渲染的字符串
let tr = ''
//过滤总数据开始的位置和结束的位置
//规律
//(当前页数-1)*每页显示几条数据<**当前页的数据**<当前页*每页显示几条数据
start = (now - 1) * count
end = now * count
// 过滤中数据得到当前页数据
pageArr = arr.filter((item, index) => {
return index >= start && index < end
})
//循环当前页的数据到表格中
pageArr.forEach(item => {
console.log(item);
tr += `
<tr>
<td><a href="lookfamilydoctor.html?tid=${item.d_id}" style="color: #1D65A6;">${item.d_name} </a></td>
<td>${item.d_sex}</td>
<td>${item.d_sid}</td>
<td>${item.d_tel}</td>
<td>${item.d_join}</td>
<td>${item.d_feature}</td>
<td>
<button data-id=${item.d_id} type="button" class="btn btn-danger cxc_xiugai"><span
class="iconfont icon-xiugai">修改</span></button>
<button data-id=${item.d_id} type="button" class="btn btn-warning shanchuzwy" ><span
class="iconfont icon-shanchu">删除</span></button>
</td>
</tr>
`
});
$('#teamList').append(tr)
}
4.动态创建页数
// 动态创建页数
function addPage(length) {
// 将之前页码等清空
$('.zwy_par').html('')
//总页数
totalPage = Math.ceil(length / pageCount)
// 添加总页数
let allPage = `
<div id='zwylb4' class='zwy_par'>
<div id="zwylb1">共有${totalNumber}条数据</div>
</div>
`
$('#zwylb2').before(allPage)
// 将之前的清空
$('#zwylb3').html('')
// 添加左箭头
let str
str = `
<button type="button" class="btn btn-default cxc_left_button" ;background-color: #fff;">
< </button>
`
// 添加页码
for (let i = 1; i <= totalPage; i++) {
str += `
<button type="button" class="btn btn-default cxc_button">${i}</button>
`
}
// 添加右箭头
str += `
<button type="button" class="btn btn-default cxc_right_button" ;">></button>
`
$('#zwylb3').append(str)
}
5.其他方法
点击改变相应的全局变量,重新渲染就可以了
// 每页显示多少条
$('.zwywb_child').on('change', '#zwylb2', function() {
console.log(this);
pageCount = $('#zwylb2>option:selected').val()
get_cxc_table_data()
})
//左右箭头的点击,做越界判断
$(document).on('click', '.cxc_left_button', function() {
if (nowPage > 1) {
nowPage--
get_cxc_table_data()
}
})
$(document).on('click', '.cxc_right_button', function() {
if (nowPage < totalPage) {
nowPage++
get_cxc_table_data()
}
})
// 页码的点击
$(document).on('click', '.cxc_button', function() {
nowPage = $(this).text()
$('#zwlb4').val($(this).text())
if (flag == true) {
get_cxc_table_data()
} else {
searchDoctor()
}
})
// 输入跳转到多少页回车跳转
$('#zwlb4').on('change', function(e) {
if ($('#zwlb4').val() <= totalPage && $('#zwlb4').val() > 0) {
nowPage = $('#zwlb4').val()
get_cxc_table_data()
}
})
更多推荐
已为社区贡献2条内容
所有评论(0)