jquery实现简单的分页功能
本文适合少量数据的使用,如果数据条数过多,不太适合!
页面html
代码
<table>
<!--展示数据的表格-->
</table>
<ul class="ul">
<!--用于样式切换的列表-->
</ul>
css
样式
table {
text-align: center;
}
.ul li {
padding: 0 5px;
height: 20px;
list-style: none;
float: left;
border: 1px solid #ccc;
text-align: center;
cursor: pointer;
}
.active {
background: blue;
color: #fff;
}
jquery
代码
//使用axja获取后台数据,我这里请求的是本地的json文件
function getdata () {
$.ajax({
type: 'get',
url: './test.json',
success: function (res) {
var len = res.length //后端数据总条数
var num = 5 //每一页5条数据,可以自己修改
var totalPage