jquery table实现分页
介绍
在网页开发中,经常会使用表格来展示数据,如果数据量比较大时,通常需要将数据拆解成多个段落,进行分页展示。
准备
在开始之前需要在HTML中导入jQuery库。
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
实现步骤
步骤 | 描述 |
---|---|
1 | 请求加载要渲染的数据 |
2 | 初始化分页 |
3 | 根据当前分页的页数和页的数量展示对应的数据 |
4 | 改变页码,数据也随之更新数据 |
5 | 更新分页信息 |
1、加载数据
首先,先请求加载获取展示的数据结构。
// 根据数据模拟数组对象
var data = [
{ id: 1, uid: 11, name: '律师1', hlepnum: 111, shownum: 101, goodnum: 100, goodshow: 103 },
{ id: 2, uid: 22, name: '律师2', hlepnum: 222, shownum: 202, goodnum: 200, goodshow: 203 },
// 更多数据...
];
2、初始化分页
在HTML中,添加一个显示表格的容器和一个显示分页的容器。
<!--表格容器-->
<div id="tableContainer"></div>
<!--分页容器 -->
<div class="page-main" id="paginationContainer"></div>
在JavaScript中,定义需要的一些变量来初始化分页相关的信息。
// 分页相关变量
var page = 1; // 当前页码
var pageSize = 3; // 每页显示的条数
var totalPages = Math.ceil(data.length / pageSize); // 一共有多少页
3、根据当前分页的页数和页的数量展示对应的数据
根据当前页码和每页显示条数,来显示对应的数据。
使用jQuery的 .slice() 方法来实现数据的切片。
// 显示当前页的数据
function showPageData() {
var start = (page - 1) * pageSize;
var end = start + pageSize;
var pageData = data.slice(start, end);
console.log(pageData);
// 数据渲染
var tableHtml = '<table>'
tableHtml += '<thead><tr>';
tableHtml += '<th>序号</th>';
tableHtml += '<th>uid</th>';
tableHtml += '<th>姓名</th>';
tableHtml += '<th>帮助人数</th>';
tableHtml += '<th>主页访问量</th>';
tableHtml += '<th>好评数</th>';
tableHtml += '<th>待新增好评数</th>';
tableHtml += '</tr></thead><tbody>';
for (var i = 0; i < pageData.length; i++) {
var row = pageData[i];
tableHtml += '<tr>';
tableHtml += '<td>' + row.id + '</td>';
tableHtml += '<td>' + row.uid + '</td>';
tableHtml += '<td>' + row.name + '</td>';
tableHtml += '<td>' + row.hlepnum + '</td>';
tableHtml += '<td>' + row.shownum + '</td>';
tableHtml += '<td>' + row.goodnum + '</td>';
tableHtml += '<td>' + row.goodshow + '</td>';
tableHtml += '</tr>';
}
tableHtml += '</tbody></table>';
$('#tableContainer').html(tableHtml);
}
// 初始化,执行
showPageData();
4、切换页码
给分页容器绑定事件,便于用户点击页码时能够切换到对应的页数。
将使用jQuery的 .on() 方法来绑定事件。
// 切换页码,执行数据更新
function changePage(num) {
page = num;
showPageData();
updatePagination();
}
// 绑定分页容器,实现分页点击
$('#paginationContainer').on('click', '.page', function () {
var page = parseInt($(this).attr('data-page'));
changePage(page);
});
5、更新分页数据
跟进当前页码和总页数来动态生成分页HTML。
// 分页信息处理
function updatePagination() {
var pageHtml = '';
for (var i = 1; i <= totalPages; i++) {
var activeClass = (page === i) ? 'active' : '';
pageHtml += '<span class="page ' + activeClass + '" data-page="' + i + '">' + i + '</span>';
}
$('#paginationContainer').html(pageHtml);
}
updatePagination();