使用JavaScript实现表格数据的分页显示

分页显示是Web应用开发中常用的一种技术，通过将数据划分为多个页面进行显示，可以提高页面加载速度和用户的交互体验。在实际开发过程中，我们通常使用JavaScript实现表格数据的分页显示。本文将介绍如何使用JavaScript实现表格数据的分页显示，包括如何获取数据、如何分页、如何显示分页数据等内容。

1. 获取数据

在实现分页显示之前，首先需要获取需要显示的数据。我们可以使用Ajax技术获取后台数据，也可以将数据直接嵌入到页面中。以嵌入数据为例，以下是一个包含数据的表格：

    <table id="table">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>20</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>22</td>
                <td>女</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>25</td>
                <td>男</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>19</td>
                <td>女</td>
            </tr>
            <tr>
                <td>钱七</td>
                <td>21</td>
                <td>男</td>
            </tr>
            <tr>
                <td>孙八</td>
                <td>23</td>
                <td>女</td>
            </tr>
        </tbody>
    </table>

2. 分页

在获取到需要显示的数据后，我们需要将数据进行分页处理。在此，我们将数据分为每页3条记录，以下是一个简单的分页函数：

function paginate(items, page, per_page) {
    var offset = (page - 1) * per_page,
        paginatedItems = items.slice(offset).slice(0, per_page),
        total_pages = Math.ceil(items.length / per_page);
    return {
        page: page,
        per_page: per_page,
        pre_page: page - 1 ? page - 1 : null,
        next_page: (total_pages > page) ? page + 1 : null,
        total: items.length,
        total_pages: total_pages,
        data: paginatedItems
    };
}

该函数接受三个参数：items表示需要进行分页的数据，page表示当前页数，per_page表示每页显示的条数。函数返回一个对象，其中包含了分页后的数据和相关信息。具体来说，该函数将数据根据page和per_page进行切割，然后计算出总页数(total_pages)，当前页数(page)、本次分页数据条数(per_page)、上一页(page - 1)和下一页(page + 1)等信息。使用该函数可以轻松实现数据分页，下面是一个例子：

var items = [
    { name: '张三', age: 20, gender: '男' },
    { name: '李四', age: 22, gender: '女' },
    { name: '王五', age: 25, gender: '男' },
    { name: '赵六', age: 19, gender: '女' },
    { name: '钱七', age: 21, gender: '男' },
    { name: '孙八', age: 23, gender: '女' }
];
var per_page = 3;
var page = 1;
var paginatedItems = paginate(items, page, per_page);
console.log(paginatedItems); // { page: 1, per_page: 3, pre_page: null, next_page: 2, total: 6, total_pages: 2, data: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 22, gender: '女' }, { name: '王五', age: 25, gender: '男' } ] }

3. 显示分页数据

在实现了数据分页后，我们需要将分页后的数据进行显示。具体来说，我们需要根据分页信息生成页码列表，并将数据显示在页面上。以下是一个简单的显示函数：

function showTable(paginatedItems) {
    var table = document.getElementById('table');
    var tbody = table.getElementsByTagName('tbody')[0];
    tbody.innerHTML = '';
    for (var i = 0; i < paginatedItems.data.length; i++) {
        var row = tbody.insertRow(i);
        var data = paginatedItems.data[i];
        for (var j in data) {
            var cell = row.insertCell(j);
            cell.innerHTML = data[j];
        }
    }
}
function showPagination(paginatedItems) {
    var pagination = document.getElementById('pagination');
    pagination.innerHTML = '';
    var page = paginatedItems.page,
        total_pages = paginatedItems.total_pages;
    var pageStart = page - 2 > 0 ? page - 2 : 1,
        pageEnd = page + 2 < total_pages ? page + 2 : total_pages;
    var ul = document.createElement('ul');
    var li = document.createElement('li');
    li.innerHTML = '<a href="#">?</a>';
    if (paginatedItems.pre_page) {
        li.querySelector('a').addEventListener('click', function () {
            showPage(paginatedItems.pre_page);
        });
    } else {
        li.className = 'disabled';
    }
    ul.appendChild(li);
    for (var i = pageStart; i <= pageEnd; i++) {
        var li = document.createElement('li');
        li.innerHTML = '<a href="#">' + i + '</a>';
        if (i == page) {
            li.className = 'active';
        } else {
            li.querySelector('a').addEventListener('click', function () {
                var page = parseInt(this.innerHTML);
                showPage(page);
            });
        }
        ul.appendChild(li);
    }
    var li = document.createElement('li');
    li.innerHTML = '<a href="#">?</a>';
    if (paginatedItems.next_page) {
        li.querySelector('a').addEventListener('click', function () {
            showPage(paginatedItems.next_page);
        });
    } else {
        li.className = 'disabled';
    }
    ul.appendChild(li);
    pagination.appendChild(ul);
}
function showPage(page) {
    var paginatedItems = paginate(items, page, per_page);
    showTable(paginatedItems);
    showPagination(paginatedItems);
}
var items = [
    { name: '张三', age: 20, gender: '男' },
    { name: '李四', age: 22, gender: '女' },
    { name: '王五', age: 25, gender: '男' },
    { name: '赵六', age: 19, gender: '女' },
    { name: '钱七', age: 21, gender: '男' },
    { name: '孙八', age: 23, gender: '女' }
];
var per_page = 3;
showPage(1);

该函数接受分页信息作为参数，然后生成页码列表并将数据显示到页面上。具体来说，该函数使用document.createElement和document.createTextNode方法创建节点，然后使用appendChild将节点添加到页面上。在生成页码列表时，该函数使用了一些CSS样式，以美化样式。

总结

本文介绍了如何使用JavaScript实现表格数据的分页显示，包括如何获取数据、如何分页、如何显示分页数据等内容。在实际开发中，我们可以根据实际需求对代码进行修改和扩展，以满足不同的需求。