jquery分页显示怎么在一个数组中拿去数组进行分页渲染并且有index的自定义属性在元素上,表格形式进行渲染
时间: 2024-03-03 19:50:22 浏览: 21
以下是使用 jQuery 分页显示一个数组并渲染成表格的示例:
HTML 代码:
```html
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="pagination"></div>
```
JavaScript 代码:
```javascript
// 定义数据数组
var data = [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 25, gender: '女' },
{ name: '王五', age: 30, gender: '男' },
{ name: '赵六', age: 35, gender: '女' },
{ name: '钱七', age: 40, gender: '男' },
{ name: '孙八', age: 45, gender: '女' },
{ name: '周九', age: 50, gender: '男' },
{ name: '吴十', age: 55, gender: '女' }
];
// 定义每页显示的数据数量
var pageSize = 3;
// 计算总页数
var pageCount = Math.ceil(data.length / pageSize);
// 渲染分页器
for (var i = 1; i <= pageCount; i++) {
$('<a href="#" class="page-link"></a>').text(i).attr('data-page', i).appendTo('#pagination');
}
// 显示第一页的数据
showPage(1);
// 给分页器添加点击事件
$('#pagination').on('click', '.page-link', function(event) {
event.preventDefault();
showPage($(this).attr('data-page'));
});
// 显示指定页码的数据
function showPage(page) {
var startIndex = (page - 1) * pageSize;
var endIndex = startIndex + pageSize - 1;
var $tbody = $('#myTable tbody');
// 清空表格数据
$tbody.empty();
// 遍历当前页的数据并渲染到表格中
for (var i = startIndex; i <= endIndex && i < data.length; i++) {
var row = $('<tr></tr>');
$('<td></td>').text(data[i].name).appendTo(row);
$('<td></td>').text(data[i].age).appendTo(row);
$('<td></td>').text(data[i].gender).appendTo(row);
row.appendTo($tbody);
}
// 给每一行添加自定义属性 index
$tbody.find('tr').each(function(index) {
$(this).attr('data-index', startIndex + index);
});
}
```
此示例中,我们首先定义了一个数据数组 `data`,然后定义了每页显示的数据数量 `pageSize`,并计算出总页数 `pageCount`。接着,我们用一个循环将分页器渲染到页面上,并给每个分页链接添加一个自定义属性 `data-page`,表示该链接对应的页码。
在页面加载完成后,我们调用 `showPage` 函数显示第一页的数据。这个函数接受一个页码参数,计算出当前页的数据起始位置和结束位置,并将这些数据渲染到表格中。在渲染表格的过程中,我们为每一行添加了一个自定义属性 `data-index`,表示该行对应的数据在原始数组中的索引位置。
最后,我们给分页器的链接添加了一个点击事件,当用户点击链接时,调用 `showPage` 函数显示对应的页码的数据。