<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.page{
list-style-type: none;
margin: 20px;
}
.page li{
display: inline-block;
width: 30px;
height: 30px;
background-color: #eee;
color: #333;
border-radius: 5px;
text-align: center;
line-height: 30px;
font-size: 14px;
cursor: pointer;
margin: 5px;
}
.page li:hover{
background-color: #2566f3;
color: #FFF;
}
.page li.active{
background-color: #2566f3;
color: #FFF;
}
.student-box{
background-color: #c6c4c4;
padding: 20px;
margin: 20px;
}
.student-box .stu-item{
display: inline-block;
background-color: #096;
padding: 5px;
border-radius: 3px;
color: #FFF;
font-size: 14px;
margin: 10px;
}
</style>
</head>
<body>
<div>
<input type="text" id="searchVal"> <button id="searchBtn">搜索</button>
</div>
<div class="student-box">
<div class="stu-item">张三</div>
</div>
<ul class="page">
</ul>
</body>
<script>
// 前端实现分页功能
//生成长度为1000的数组 值为学生名称
const student = [ "陈娟", "钱军", "苏杰", "叶芳", "龚勇", "贾秀兰", "徐刚", "黄秀兰", "毛桂英", "杜明", "罗艳", "石静", "汤秀兰", "曹杰", "廖杰", "贺洋", "段芳", "董洋", "邵明", "胡秀英", "罗娜", "廖秀英", "方秀兰", "阎秀兰", "曾霞", "张涛", "杜桂英", "江伟", "孙静", "任霞", "杨秀英", "于娜", "林平", "尹磊", "秦涛", "赵军", "姚丽", "乔娟", "丁秀兰", "董洋", "张娟", "胡霞", "潘勇", "石军", "孔明", "傅勇", "黎明", "黎军", "林磊", "苏芳", "贺军", "沈丽", "常娟", "胡勇", "张娜", "宋艳", "史军", "乔平", "彭磊", "史超", "阎刚", "邹明", "戴洋", "姜超", "曾平", "卢明", "汤超", "梁艳", "叶超", "陆强", "马勇", "史明", "叶敏", "易芳", "尹艳", "董敏", "李刚", "戴超", "许秀兰", "胡刚", "韩秀兰", "石丽", "刘秀英", "方超", "董涛", "曾平", "曾强", "邱军", "邓超", "金霞", "薛洋", "潘涛", "姚军", "廖明", "孙芳", "锺磊", "石平", "蒋明", "李涛", "谢芳", "孟艳", "顾娟", "董涛", "杨秀英", "张娟", "白芳", "许刚", "毛涛", "贺军", "韩霞", "于娟", "林艳", "贾平", "江丽", "易杰", "廖强", "汤霞", "彭勇", "白芳", "潘强", "林敏", "易娜", "邵明", "丁平", "贾军", "熊军", "许芳", "蔡娟", "钱娜", "江静", "郭平", "金磊", "邹强", "江明", "史芳", "彭明", "文刚", "杜秀兰", "薛平", "萧明", "毛霞", "董军", "秦勇", "熊秀兰", "邓丽", "曹秀英", "郝强", "陈军", "郭平", "尹霞", "孔敏", "潘军", "廖霞", "郝秀兰", "邹军", "刘涛", "何丽", "何平", "郝静", "杨勇", "叶平", "邱秀兰", "任霞", "顾军", "郭磊", "戴平", "傅静", "夏军", "郭静", "吕明", "姜杰", "尹静", "郑秀英", "田明", "钱超", "江艳", "蔡娟", "李霞", "夏强", "易静", "锺芳", "吕磊", "廖丽", "邹敏", "常勇", "邱军", "罗杰", "林平", "熊伟", "郭平", "沈秀兰", "丁明", "邓丽", "高娜", "顾强", "沈强", "蔡敏", "龙涛", "黄静", "任娟", "朱杰", "姚秀英", "冯霞", "易芳", "汤涛", "姜桂英", "易秀兰", "孔霞", "黄平", "郭强", "林伟", "毛娜", "孟敏", "江磊", "金平", "许静", "梁敏", "马磊", "赵娟", "常杰", "冯敏", "彭芳", "苏静", "邓明", "贾洋", "胡霞", "潘娜", "贺丽", "傅秀英", "谢静", "锺娟", "史秀英", "于芳", "贾军", "侯明", "孟勇", "江军", "唐敏", "叶杰", "陆刚", "汤磊", "夏涛", "曹艳", "锺静", "龙秀英", "戴平", "田敏", "王丽", "袁丽", "康静", "金超", "万秀英", "龚杰", "秦秀兰", "邹明", "姜敏", "杨娜", "锺磊", "何艳", "余秀兰", "孟丽", "龚勇", "陆军", "阎涛", "孙洋", "罗敏", "龚芳", "黎军", "朱勇", "张刚", "高霞", "尹伟", "苏洋", "丁超", "冯芳", "赖芳", "傅娟", "范静", "郝磊", "锺芳", "丁平", "赖霞", "杜明", "于涛", "朱军", "曾强", "彭艳", "贺强", "任霞", "陈勇", "邵娟", "雷超", "何刚", "谭军", "许娜", "郑娜", "侯霞", "何明", "侯平", "蒋洋", "石霞", "曹勇", "许敏", "郝刚", "戴平", "顾秀兰", "易军", "胡明", "马杰", "郑敏", "范丽", "秦强", "崔娜", "宋秀英", "何秀兰", "李强", "冯刚", "袁芳", "邱杰", "谭娜", "林洋", "傅刚", "袁刚", "黎刚", "罗秀英", "阎军", "邱丽", "许丽", "夏伟", "戴杰", "罗涛", "苏超", "白强", "高秀英", "蒋秀兰", "刘丽", "顾秀兰", "李芳", "赵杰", "尹磊", "邵勇", "李秀兰", "黎杰", "段桂英", "夏磊", "邓艳", "钱静", "潘勇", "乔勇", "薛平", "毛丽", "冯艳", "史强", "孟芳", "阎静", "易艳", "萧艳", "杜明", "乔磊", "郭秀英", "戴丽", "冯敏", "贾芳", "姜敏", "谢明", "姚敏", "江洋", "龚洋", "陆娟", "夏勇", "赖艳", "孙秀兰", "魏超", "黎杰", "崔敏", "黎超", "韩静", "文娜", "范艳", "蒋娟", "秦磊", "方娜", "黄磊", "黄艳", "郑霞", "冯杰", "韩秀兰", "孟娜", "周静", "朱磊", "曹秀英", "吕霞", "姚洋", "邹明", "曹勇", "邓芳", "熊洋", "史军", "杨明", "郝芳", "尹霞", "邓军", "杨艳", "邓平", "贺磊", "赖娜", "马静", "常艳", "何敏", "张娟", "范军", "赖刚", "陈敏", "侯霞", "廖秀英", "戴秀兰", "孔杰", "张敏", "贺霞", "白娜", "苏超", "钱明", "戴伟", "邱明", "邱勇", "林洋", "钱军", "康娟", "江涛", "丁磊", "曹勇", "冯静", "唐丽", "龙勇", "姚丽", "邵霞", "黎秀英", "谭敏", "罗娟", "熊静", "孟丽", "丁明", "张娟", "董敏", "金洋", "郑娟", "孔娜", "汤丽", "毛超", "董磊", "方超", "赖娟", "孙明", "薛娟", "江艳", "熊超", "冯秀英", "马磊", "萧秀兰", "黄超", "史军", "高强", "苏超", "许杰", "叶敏", "卢超", "毛桂英", "蔡平", "姚明", "熊勇", "姜强", "何杰", "曹军", "范明", "顾磊", "易丽", "刘霞", "袁艳", "叶秀兰", "秦超", "郭平", "朱霞", "姜娜", "郝芳", "梁强", "曾芳", "阎超", "胡勇", "周磊", "许敏", "孟杰", "朱秀兰", "汤军", "赵霞", "傅涛", "方芳", "阎杰", "傅桂英", "方霞", "戴军", "龙军", "段平", "郝洋", "易娟", "胡平", "陈秀英", "萧静", "姚磊", "姚刚", "黎娟", "孟洋", "林涛", "贺霞", "阎艳", "锺秀兰", "曹涛", "龚丽", "汪娟", "萧涛", "徐军", "郝军", "姜丽", "邵艳", "刘娟", "邓强", "孙超", "毛艳", "贺平", "郑超", "龚勇", "程明", "陆勇", "赖明", "董军", "薛秀英", "郝霞", "张洋", "陆强", "曹刚", "谢平", "丁超", "何娜", "余秀英", "邓明", "蒋明", "龚杰", "汤秀英", "陈刚", "潘霞", "邵磊", "毛勇", "锺霞", "范伟", "林平", "杜平", "顾秀英", "徐秀英", "段磊", "侯霞", "邓娜", "傅娟", "萧娟", "范艳", "郭娟", "蔡涛", "余涛", "万芳", "吕明", "姚静", "文艳", "龙超", "马伟", "吴刚", "邵刚", "廖强", "程霞", "毛强", "许敏", "陈涛", "邵艳", "锺平", "毛桂英", "李伟", "吕强", "孟涛", "陈平", "冯娟", "雷磊", "钱丽", "夏艳", "易刚", "乔艳", "锺磊", "吴霞", "万磊", "戴洋", "谢明", "熊桂英", "邓艳", "郝平", "武明", "董静", "蔡勇", "谢娟", "武桂英", "夏军", "侯明", "锺超", "龚洋", "刘艳", "石强", "梁军", "唐军", "杜秀英", "高超", "石敏", "唐伟", "程平", "苏强", "马娟", "白杰", "宋丽", "秦丽", "潘敏", "沈敏", "范刚", "江勇", "袁磊", "曾娟", "朱丽", "吴强", "汪平", "范杰", "田艳", "汪勇", "田伟", "姚静", "王娜", "孟军", "邵娜", "阎洋", "龙刚", "田静", "曾秀英", "毛娟", "段芳", "郑伟", "秦芳", "傅刚", "吕磊", "胡超", "阎杰", "余娟", "苏桂英", "林杰", "史娟", "黄平", "吕刚", "周霞", "熊军", "梁芳", "武芳", "姚超", "宋勇", "许军", "侯秀英", "梁明", "朱霞", "朱静", "侯芳", "卢涛", "徐桂英", "秦磊", "钱敏", "沈秀英", "夏磊", "孔霞", "赵秀兰", "孔涛", "叶明", "廖霞", "魏芳", "文涛", "孙丽", "陈军", "易敏", "贺静", "文艳", "万平", "姜军", "郭芳", "罗霞", "江洋", "冯洋", "曹霞", "彭娟", "阎超", "朱秀兰", "郝强", "侯明", "孔洋", "傅刚", "吕勇", "董平", "傅娟", "吕艳", "任秀英", "韩平", "于涛", "常明", "韩杰", "董娜", "石娜", "龚艳", "余秀兰", "罗桂英", "蔡刚", "陈明", "魏娜", "傅芳", "范杰", "董刚", "潘超", "毛芳", "孔艳", "谭洋", "魏超", "顾磊", "马强", "江刚", "傅娜", "蒋静", "沈秀英", "宋强", "谢磊", "易敏", "雷静", "戴敏", "江敏", "白艳", "侯艳", "陆洋", "胡芳", "姚杰", "朱娟", "龚艳", "高刚", "龙芳", "陈秀英", "胡秀英", "彭霞", "姜涛", "郭军", "孙桂英", "余秀兰", "文超", "周敏", "郝超", "罗艳", "唐霞", "石秀兰", "夏强", "叶霞", "夏静", "石秀兰", "谢伟", "石刚", "薛涛", "赖静", "于娟", "蔡军", "范敏", "金敏", "彭平", "孟艳", "罗洋", "曾磊", "龚超", "余涛", "郑明", "彭勇", "邱静", "尹静", "范霞", "邵桂英", "龚霞", "萧敏", "郑秀兰", "何刚", "陈娜", "吴刚", "梁超", "潘军", "赵敏", "张明", "冯静", "尹秀英", "武平", "谭军", "贾霞", "林杰", "江敏", "苏勇", "尹平", "杜芳", "金娟", "孟刚", "林勇", "邹秀兰", "尹芳", "郑强", "曹杰", "苏敏", "侯磊", "杜秀兰", "徐洋", "顾军", "苏杰", "夏军", "郝强", "高娜", "龚杰", "何娜", "程磊", "蒋杰", "姜秀兰", "顾磊", "黄敏", "韩磊", "吕丽", "石秀英", "阎丽", "邹艳", "林艳", "贾秀英", "金秀英", "雷洋", "李丽", "侯芳", "郝霞", "沈刚", "尹霞", "范杰", "许秀英", "蒋洋", "胡娜", "宋桂英", "叶勇", "张磊", "曾敏", "贺涛", "田军", "文娟", "于敏", "胡敏", "钱强", "孟敏", "潘娟", "文超", "张涛", "白霞", "黎敏", "戴静", "阎静", "康军", "夏敏", "戴明", "杨明", "万伟", "刘磊", "李刚", "康娟", "戴杰", "韩磊", "陆霞", "曹霞", "叶丽", "康霞", "冯丽", "余军", "丁娜", "姜超", "赵秀英", "孙刚", "方平", "彭艳", "徐丽", "杜霞", "周娜", "锺霞", "易杰", "高丽", "余桂英", "赵娟", "龙艳", "袁强", "易丽", "龙勇", "顾明", "阎芳", "张军", "陈勇", "萧磊", "彭勇", "姜丽", "邹秀英", "傅杰", "石涛", "孙刚", "贺静", "汪敏", "顾军", "段杰", "韩军", "夏军", "雷秀兰", "崔秀兰", "龙艳", "邱娜", "袁芳", "雷涛", "杜强", "何秀兰", "萧伟", "郑霞", "韩洋", "常杰", "乔丽", "杜霞", "金敏", "万娜", "常洋", "武霞", "郑霞", "姚芳", "陆伟", "刘勇", "黄静", "夏桂英", "王磊", "姜涛", "邵艳", "邓敏", "邱刚", "龙洋", "梁霞", "丁刚", "高娜", "谭强", "顾秀兰", "武平", "唐杰", "赵敏", "吕秀英", "金强", "任勇", "锺强", "卢秀英", "熊洋", "熊杰", "王艳", "刘洋", "潘磊", "彭明", "傅霞", "林芳", "崔强", "郑杰", "白敏", "董霞", "谭娜", "赵秀英", "胡霞", "康勇", "贺芳", "姚军", "程平", "黎明", "宋磊", "谭秀英", "孙磊", "田敏", "方芳", "文艳", "邹娜", "夏静", "黄敏", "徐明", "董平", "魏芳", "方霞", "锺刚", "沈艳", "吕娜", "林军", "范丽", "廖超", "乔敏", "史秀英", "郝伟" ]
const pageListDOM = document.querySelector('.page');
const searchValDOM = document.querySelector('#searchVal')
const searchBtn = document.querySelector("#searchBtn")
let limit = 50;//每页条数
let skip = 20;//页码
let renderList =[];
//根据数据生成页码
//createPageNumList(student,limit);
window.onload = function(){
renderList=student;
createPageNumList(renderList,limit,skip)
renderStudentList(getPageData(limit,skip,renderList))
}
// 搜索功能
searchBtn.onclick = function(){
renderList = student.filter(function(item){
return item.indexOf(searchValDOM.value) != -1;
})
console.log("点击搜索的集合",renderList)
skip =1;//重置为第1页
createPageNumList(renderList,limit,skip)
renderStudentList(getPageData(limit,skip,renderList))
}
//绑定点击事件
pageListDOM.onclick = function(event){
const e = event || window.event;
if(e.target.nodeName == 'LI'){
//设置选中效果
//e.target.className += ' active';
//classList获取元素的类名集合 方法： add remove replace contains toggle
//删除所有元素的选中类名
document.querySelectorAll('.page li').forEach(function(item){
item.classList.remove('active');
})
//给当前元素添加选中类名
e.target.classList.add('active');
const result = getPageData(limit,e.target.innerText,renderList);
renderStudentList(result);//调用渲染方法
}
};
// 根据数据渲染节点
function renderStudentList(dataList){
if(!dataList.length) return;//边界处理 如果长度为0直接返回
const studentBox = document.querySelector('.student-box');
const stuItemStrList = dataList.map(function(item){
//字符串节点
const stuItemStr = "<div class='stu-item'>"+item+"</div>"
return stuItemStr;
})
studentBox.innerHTML = stuItemStrList.join('')
};
// 根据数据生成页码
function createPageNumList(dataList,pageSize,pageNum){
console.log("生成页码集合",dataList);
const pageCount = Math.ceil(dataList.length / pageSize);//上舍入取整;
const pageListDOM = document.querySelector('.page');
const documentFragment = document.createDocumentFragment();
pageListDOM.innerHTML = '';
for(var i =1;i<=pageCount;i++){
const liDOM = document.createElement('li');
liDOM.innerText = i;
//初始化根据当前页 设置选中效果
if(i==pageNum){
liDOM.classList.add('active');
}
documentFragment.appendChild(liDOM);
}
pageListDOM.appendChild(documentFragment);
}
/**
* 分页逻辑： limit|pageSize 每页条数 skip|（pageNum） 页码
*
* 当前每页条数：10
* 总页数： 总数/每页条数
*
* limit：10
* total:1000
* skip: total/limit
**/
//功能根据 获取分页数据
function getPageData(limit,skip,student){
//开始索引： 当前页-1 * 每页条数 如：当前页 1 1-1=0 0*10 = 0;
// 当前页 2 2-1= 1*10 = 10;
//结束索引： 当前页 * 每页条数 如： 当前 1 1*10 = 10;
// 当前页2： 2*10 = 20;
let startIndex = (skip-1)*limit;
let endIndex = skip*limit;
return student.slice(startIndex,endIndex);
}
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
