<!-- </li>-->
<!-- <li class="page-item"><a class="page-link" href="#">1</a></li>-->
<!-- <li class="page-item"><a class="page-link" href="#">2</a></li>-->
<!-- <li class="page-item"><a class="page-link" href="#">3</a></li>-->
<!-- <li class="page-item" id="next">-->
<!-- <a class="page-link" href="#" aria-label="Next">-->
<!-- <span aria-hidden="true">»</span>-->
<!-- </a>-->
<!-- </li>-->
</ul>
<input style="width:50px;margin: 0 5px" type="text" class="form-control" id="search-page" />
<div class="btn btn-default page-confirm" >跳转</div>
</div>
</nav>
</div>
直接复制html代码然后把注释的放开就是图一的效果了,
## 生成表格
写完了静态的html,那么接下来先渲染表格,这是表格的html代码
<div id="table-box" style=" height: 428px; clear: both;">
<table class="table table-striped" style="margin: 0;">
<thead style="background-color: #eee;">
<tr>
<th scope="col"></th>
<th scope="col">小区编码</th>
<th scope="col">小区名称</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
因为要动态获取表格的高度所以外面加了个盒子。
这是动态生成表格高度的代码
let tableHeight = document.getElementById("table-box")
tableHeight.style.height = data.length \* 30(每条数据的高度)+ 40(thead的高度) + "px" //data.length为每页有多少条数据。
接下来动态生成表格的js代码
for (let i = 0; i < data.length; i++) { //data为后端返回的数据
var html = "";
html += `<tr>
${data[i].id} ${data[i].Name} `; $('#tbody').append(html); $('input[data-isCheck="isCheck"]').attr("checked", true); //true为选择,false为取消选择 }
生成了表格后的页面
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210611171709263.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pldF9Mb3Zlcg==,size_16,color_FFFFFF,t_70)
单选框选择触发事件用这个方法
// 根据单选框触发是否提交事件!
$('input:radio.check-radio').change(function () {
console.log(this) //里面自己写需要的功能
})
## 搜索功能
接下来搜索功能,在主函数中定义searchList()这个方法
searchList() {
let searchInput = document.getElementById("search-input")
searchInput.addEventListener("keyup", function (event) { //搜索用的键盘回车事件
event.preventDefault();
let searchValue = $("#search-input").val()
if (event.keyCode === 13) {
let data = searchValue
getTableList(data, 1) //getTableList为表格查询请求接口的方法
}
});
},
这里就实现了搜索功能,效果看图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210611172429822.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pldF9Mb3Zlcg==,size_16,color_FFFFFF,t_70)
## 表格下面的功能
接下来实现表格下面的功能,html代码
<nav aria-label="Page navigation example" style="display: flex;align-items: center;justify-content: space-between;height: 74px;">
<div id="page-text">
</div>
<div style="display: flex;align-items: center">
<ul class="pagination">
</ul>
<input style="width:50px;margin: 0 5px" type="text" class="form-control" id="search-page" />
<div class="btn btn-default page-confirm" >跳转</div>
</div>
</nav>
实现之前要先定义一个对象来储存页码信息
var pageList= { //不要在意名字===/~\_~/
pageNo: 1, //当前页
pageSize: 10, //一页多少条,我这里写死了的没有涉及到改变展示页数
pageCount: 0, //总共多少条
pageTotal: 0, //总共多少页
pagingShowNum: [] //展示的页码数组成的数组
};
var newPagingShowNum=[] //定义一个新的页码数组成的数组,来装页码
并在请求到后端返回的接口数据中初始化pageObj 对象
pageList.pageNo = data.pageNum //当前页
pageList.pageCount = data.count //总共多少条数据
pageList.pageTotal = Math.ceil(pageList.pageCount / pageList.pageSize) //总共多少页
### 左下的页码展示
实现动态生成左下的页码展示
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲page-text").app…{pageList.pageNo}页,总KaTeX parse error: Expected 'EOF', got '#' at position 51: … style="color: #̲a2a2a2">{pageList.pageTotal}页
`)
效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210611173242663.png)
### 分页
接下来实现分页,分页有点复杂,当显示到中间时效果如图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210611173647263.png)
因为我做的分页只展示**四条**数据,涉及到小于五条与大于四条分页时两种情况。
定义**pagingShowNum**
if (pageList.pageTotal <= 5) {
for (let i = 0; i < pageList.pageTotal; i++) {
pageList.pagingShowNum[i] = i + 1
}
} else {
for (let i = 0; i < 4; i++) { //最长显示五页
pageList.pagingShowNum[i] = i + 1
}
pageList.pagingShowNum[pageList.pagingShowNum.length - 1] = pageList.pageTotal
}
动态生成分页的js代码
if (pageList.pageTotal <= 5) {//小于五条的情况
$(".pagination").append(`
- «
- 1
- »
- `) for (let i = 1; i < pageList.pagingShowNum.length; i++) { if (pageList.pagingShowNum[i]) { $("#page-div").append(`
${pageList.pagingShowNum[i]} `) } } } else { }//大于四条的情况
当页数大于4条时就要考虑生成…来隐藏没有展示的代码
$(".pagination").append( `
- «
- 1
- ${pageList.pageTotal}
- »
- `) $('#page-div').after(`
- ...
- `); //右边省略号 $('#page-div').before(`
- ...
- `); //左边省略号 for (let i = 1; i < pageList.pagingShowNum.length - 1; i++) { if (newPagingShowNum.length != 0) { pageList.pagingShowNum[1] = newPagingShowNum[1]
真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】pageList.pagingShowNum[2] = newPagingShowNum[2] $("#page-div").append(`
${pageList.pagingShowNum[i]}
) } else { if (pageList.pagingShowNum[i]) { $("#page-div").append(
${pageList.pagingShowNum[i]}
`)
}
}
}
if (pageList.pagingShowNum[2] < 4) {
$(“.ellipsis-left”).hide() //中间页面小于4,左边省略号隐藏
}
if (pageList.pagingShowNum[2] > pageList.pageTotal - 2) {
$(“.ellipsis-right”).hide() //中间页面大于最大页码-2,右边省略号隐藏
}右边省略号展开
$(".ellipsis-right").on("click", function () { $("#page-div").empty() if (pageList.pagingShowNum[2] < pageList.pageTotal - 2) { pageList.pagingShowNum[1] = pageList.pagingShowNum[1] + 2 pageList.pagingShowNum[2] = pageList.pagingShowNum[2] + 2 } else { //点到最右边是[1,…,total-2,total-1,total] pageList.pagingShowNum[1] = pageList.pageTotal - 2 pageList.pagingShowNum[2] = pageList.pageTotal - 1 $(".ellipsis-right").hide() } if (pageList.pagingShowNum[2] == pageList.pageTotal - 1) { $(".ellipsis-right").hide() } if (pageList.pagingShowNum[1] > 3) { $(".ellipsis-left").show() } for (let i = 1; i < pageList.pagingShowNum.length - 1; i++) { if (pageList.pagingShowNum[i]) { $("#page-div").append(`
${pageList.pagingShowNum[i]}
`)
}
}
newPagingShowNum= pageList.pagingShowNum
})![在这里插入图片描述](https://img-blog.csdnimg.cn/20210616161756946.png) 左边省略号展开
$(".ellipsis-left").on("click", function () { $("#page-div").empty() if (pageList.pagingShowNum[1] > 3) { pageList.pagingShowNum[1] = pageList.pagingShowNum[1] - 2 pageList.pagingShowNum[2] = pageList.pagingShowNum[2] - 2 $(".ellipsis-right").show() } else { //点到最左边是[1,2,3,…,total] pageList.pagingShowNum[1] = 2 pageList.pagingShowNum[2] = 3 } if (pageList.pagingShowNum[1] < 3) { $(".ellipsis-left").hide() } for (let i = 1; i < pageList.pagingShowNum.length - 1; i++) { if (pageList.pagingShowNum[i]) { $("#page-div").append(`
${pageList.pagingShowNum[i]}
`)
}
}
newPagingShowNum = pageList.pagingShowNum
})![在这里插入图片描述](https://img-blog.csdnimg.cn/2021061616173230.png) #### 结束 一次完整的面试流程就是这样啦,小编综合了腾讯的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析,分享给小伙伴们,有没有需要的小伙伴们都去领取! ![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)