记录我学习JS的记录
都是自己人，分页功能的学习也是为了方便用户的一个功能，在网页进行大量数据展示的时候，可以通过分页技术来将数据分成若干页面展示每次请求查询，不需要查询所有，通过定制页码或者别的方式，只需要查询数据的一 部分，将数据看作一本书，通过页码可以跳转可见数据，直到找到自己想要的就OK啦 是不是很方便呢 下面是效果图
样式因人而异，我的样式做的不是很好 这边主要是实现JS功能
咱！直接上代码
HTML：
<table border="1" cellspacing="0" cellpadding="20" class="table">
<thead>
<tr>
<td><input type="checkbox" onclick="all_choose()" id="all"></td>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<div class="bottom">
<select class="selects" onchange="(event)">
<option value="5">每页5条</option>
<option value="10">每页10条</option>
<option value="15">每页15条</option>
<option value="20">每页20条</option>
</select>
<div>共</div>
<div>23</div>
<div>条</div>
<div class="paging">
</div>
<div class="inpt" style="display: flex;">
<span>前往第</span>
<input type="number" value="" style="width: 20%; margin: 0 5px;" id="go">
页
</div>
</div>
</div>CSS样式：
*{
margin: 0;
padding: 0;
}
.bottom {
margin-top: 20px;
display: flex;
align-items: center;
}
.bottom div {
margin-left: 5px;
}
.paging {
display: flex;
align-items: center;
}
.paging div {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
text-align: center;
line-height: 15px;
border: 1px solid #EEEEEE;
border-radius: 6px;
}
.paging span {
display: block;
width: 30px;
height: 30px;
text-align: center;
line-height: 15px;
border: 1px solid #EEEEEE;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 6px;
}
.table th,
td {
width: 23vh;
text-align: center;
}
.selects {
width: 30%;
}下面就是最重要的JS部分：
首先要获取初始数据（用数组包对象的形式） 比如你要填入的信息 这边就写一下常用的 id代表序号 name代表名字 age代表年龄 address代表地点
let data = [{
id: 1,
name: '张三',
age: '18',
address: '河南'
}, {
id: 2,
name: '张三',
age: '18',
address: '河南'
}, {
id: 3,
name: '张三',
age: '18',
address: '河南'
}, {
id: 4,
name: '张三',
age: '18',
address: '河南'
}, {
id: 5,
name: '张三',
age: '18',
address: '河南'
}, {
id: 6,
name: '张三',
age: '18',
address: '河南'
}, {
id: 7,
name: '张三',
age: '18',
address: '河南'
}, {
id: 8,
name: '张三',
age: '18',
address: '河南'
}, {
id: 9,
name: '张三',
age: '18',
address: '河南'
}, {
id: 10,
name: '张三',
age: '18',
address: '河南'
}, {
id: 11,
name: '张三',
age: '18',
address: '河南'
}, {
id: 12,
name: '张三',
age: '18',
address: '河南'
}, {
id: 13,
name: '张三',
age: '18',
address: '河南'
}, {
id: 14,
name: '张三',
age: '18',
address: '河南'
}, {
id: 15,
name: '张三',
age: '18',
address: '河南'
}, {
id: 16,
name: '张三',
age: '18',
address: '河南'
}, {
id: 17,
name: '张三',
age: '18',
address: '河南'
}, {
id: 18,
name: '张三',
age: '18',
address: '河南'
}, {
id: 19,
name: '张三',
age: '18',
address: '河南'
}, {
id: 20,
name: '张三',
age: '18',
address: '河南'
}, {
id: 21,
name: '张三',
age: '18',
address: '河南'
}, {
id: 22,
name: '张三',
age: '18',
address: '河南'
}, {
id: 23,
name: '张三',
age: '18',
address: '河南'
}, ]
let tbody = document.getElementById('tbody');
let page = 5; //一页显示5行数据
let num = 0; //显示的是在第几页 因为是下标计算 第一页就是0 以此类推
let selects = document.getElementsByClassName('selects')[0];
//获取初始数据
let c = 0;
let a = 0;
//首次需要先渲染一次哦！！其次开始渲染页面
renders();
function renders() {
let str = '';
for (let i = num * page; i < (num + 1) * page; i++) {
if (data[i]) {
// console.log(data);
str += `<tr>
<td>
<input type="checkbox" class="one_choose" onclick="checkone()">
</td>
<td>${data[i].id}</td>
<td>${data[i].name}</td>
<td>${data[i].age}</td>
<td>${data[i].address}</td>
</tr>`
}
}
tbody.innerHTML = str;
render_paging();
}
//渲染然后还要渲染底部导航页面左右的页面
function render_paging() {
let str = `<div onclick="left()"> < </div>`;
let count = Math.ceil(data.length / page);
c = count;
for (let i = 0; i < count; i++) {
str +=
`<span style="background-color:${num == i ? 'gray' : '#EEEEEE'}" onclick="gogo_througth(${i})" class="go_througth">${i+1}</span>`;
}
str += `<div onclick="right()">></div>`;
document.getElementsByClassName('paging')[0].innerHTML = str;
}
//渲染左右按钮和页数接下来是给左右图标添加绑定事件
function right() {
let count = Math.ceil(data.length / page);
if (num < count - 1) {
num++;
all.checked = false;
renders();
} else {
alert('我也是有底线的哦~');
}
}
//右按钮function left() {
if (num > 0) {
num--;
all.checked = false;
renders();
} else {
alert('都第一页了你还要干嘛？');
}
}
//左按钮给下拉选项框添加onchange事件 以及全选和单选的实现
selects.addEventListener("change", function() {
page = this.value
num = 0;
renders()
})
//给下拉框添加onchange事件
let all = document.getElementById('all');
function all_choose() {
let one_choose = document.getElementsByClassName('one_choose');
let len = one_choose.length;
// console.log(all.checked);
// console.log(one_choose);
for (let i = 0; i < len; i++) {
//当全选按钮为true时，全部按钮都为true，否则相反
if (all.checked == true) {
one_choose[i].checked = true;
} else {
one_choose[i].checked = false;
}
}
}
//实现全选按钮函数
function checkone() {
let one_choose = document.getElementsByClassName('one_choose');
let len = one_choose.length;
a = 0
//当单选按钮都为true时，全选按钮也为true，否则为false
for (let i = 0; i < len; i++) {
if (one_choose[i].checked == true) {
a++;
// console.log(all);
if (a == page) {
all.checked = true;
} else {
all.checked = false;
}
}
}
}
//实现单选选按钮函数后面结尾在作业简单的优化 比如给input绑定一下回车事件等等
let go = document.getElementById('go');
let go_througth = document.getElementsByClassName('go_througth');
function gogo_througth(i) {
all.checked = false;
console.log(i);
// one_choose[i].checked = false;
num = i;
renders();
}
//页数数字点击自动跳转
go.addEventListener('keydown', function(e) {
// all.checked = false;
// 判断是否按下了回车键
if (e.keyCode === 13) {
// 在这里处理回车事件
if (go.value != parseInt(go.value)) {
go.value = parseInt(go.value)
console.log(go.value);
}
if (go.value == parseInt(go.value)) {
if (go.value <= c && go.value > 0) {
// console.log(go.value);
num = go.value - 1;
all.checked = false;
renders();
} else {
alert('你选的页面不对');
go.value = '';
}
}
}
});
//input绑定回车事件以上就是JS实现简单分页功能 本人也还在学习阶段 有大佬看到的话可以提出一些优化建议和指导
1018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
