jQuery 动态生成表格并添加分页功能技术教程

jQuery 动态生成表格并添加分页功能 技术教程

本文介绍如何使用jQuery动态生成表格，并为表格数据添加分页功能。通过详细步骤和案例讲解，帮助你快速掌握这一技术。

一、准备工作

确保你的HTML页面已经包含了jQuery库。可以通过CDN方式引入。

二、动态生成表格数据

首先，我们定义一个数组来存储表格数据，并使用jQuery动态生成表格。

三、分页功能实现

接下来，我们为表格数据添加分页功能。假设每页显示5行数据。

四、案例讲解

1. HTML部分

<div id="table-container"></div>
<div class="pagination"></div>

2. JavaScript部分

$(document).ready(function() {
    var data = [
        { id: 1, name: '张三', age: 25, city: '北京' },
        { id: 2, name: '李四', age: 30, city: '上海' },
        { id: 3, name: '王五', age: 35, city: '广州' },
        { id: 4, name: '赵六', age: 28, city: '深圳' },
        { id: 5, name: '孙七', age: 22, city: '杭州' },
        { id: 6, name: '周八', age: 26, city: '成都' },
        { id: 7, name: '吴九', age: 29, city: '重庆' }
    ];

    var rowsPerPage = 5;
    var currentPage = 1;

    function renderTable(page) {
        var start = (page - 1) * rowsPerPage;
        var end = start + rowsPerPage;
        var pageData = data.slice(start, end);

        $('#table-container').empty();
        var table = $('');
        var thead = $('ID姓名年龄城市');
        var tbody = $('');

        pageData.forEach(function(item) {
            var row = $('');
            row.append($('').text(item.id));
            row.append($('').text(item.name));
            row.append($('').text(item.age));
            row.append($('').text(item.city));
            tbody.append(row);
        });

        table.append(thead).append(tbody);
        $('#table-container').append(table);

        renderPagination(page);
    }

    function renderPagination(page) {
        var totalPages = Math.ceil(data.length / rowsPerPage);
        $('.pagination').empty();

        for (var i = 1; i <= totalPages; i++) {
            var button = $('');
            if (i === page) {
                button.css('font-weight', 'bold');
            }
            button.on('click', function() {
                currentPage = i;
                renderTable(currentPage);
            });
            $('.pagination').append(button);
        }
    }

    renderTable(currentPage);
});

五、总结

通过本文的介绍，我们学会了如何使用jQuery动态生成表格并添加分页功能。这一技术可以帮助我们更高效地展示和处理大量数据。

$(document).ready(function() {
var data = [
{ id: 1, name: ‘张三’, age: 25, city: ‘北京’ },
{ id: 2, name: ‘李四’, age: 30, city: ‘上海’ },
{ id: 3, name: ‘王五’, age: 35, city: ‘广州’ },
{ id: 4, name: ‘赵六’, age: 28, city: ‘深圳’ },
{ id: 5, name: ‘孙七’, age: 22, city: ‘杭州’ },
{ id: 6, name: ‘周八’, age: 26, city: ‘成都’ },
{ id: 7, name: ‘吴九’, age: 29, city: ‘重庆’ }
];

var rowsPerPage = 5;
var currentPage = 1;

function renderTable(page) {
var start = (page – 1) * rowsPerPage;
var end = start + rowsPerPage;
var pageData = data.slice(start, end);

$(‘#table-container’).empty();
var table = $(‘

‘);
var thead = $(‘

ID 姓名年龄城市

‘);
var tbody = $(‘

‘);

pageData.forEach(function(item) {
var row = $(‘

‘);
row.append($(‘

‘).text(item.id));
row.append($(‘

‘).text(item.name));
row.append($(‘

‘).text(item.age));
row.append($(‘

‘).text(item.city));
tbody.append(row);
});

table.append(thead).append(tbody);
$(‘#table-container’).append(table);

renderPagination(page);
}

function renderPagination(page) {
var totalPages = Math.ceil(data.length / rowsPerPage);
$(‘.pagination’).empty();

for (var i = 1; i <= totalPages; i++) {
var button = $('‘);
if (i === page) {
button.css(‘font-weight’, ‘bold’);
}
button.on(‘click’, function() {
currentPage = i;
renderTable(currentPage);
});
$(‘.pagination’).append(button);
}
}

renderTable(currentPage);
});