AJAX 仿EXCEL表格功能

三、功能实现步骤

（一）初始化表格结构

1、在 HTML 中创建一个空的表格元素，包含表头和空的表体。

<table id="excelTable">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

2、使用 CSS 为表格添加基本样式，如下所示：

#excelTable {
    width: 100%;
    border-collapse: collapse;
}
#excelTable th, #excelTable td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}
#excelTable th {
    background-color: #f2f2f2;
}

（二）发送 AJAX 请求获取数据

1、在 JavaScript 中使用fetch API 发送异步请求获取数据，假设服务器端有一个提供数据的接口/getData，代码如下：

fetch('/getData')
    .then(response => response.json())
    .then(data => {
        // 处理数据并填充表格
        populateTable(data);
    })
    .catch(error => {
        console.error('Error fetching data:', error);
    });

2、服务器端接收到请求后，查询数据库或其他数据源，将结果以 JSON 格式返回给前端，返回的数据可能如下：

[
    {"id": 1, "name": "张三", "age": 25, "gender": "男"},
    {"id": 2, "name": "李四", "age": 30, "gender": "女"},
    // 更多数据...
]

（三）填充表格数据

1、定义一个函数populateTable，用于将获取到的数据填充到表格的<tbody> 中，示例代码如下：

function populateTable(data) {
    const tbody = document.querySelector('#excelTable tbody');
    tbody.innerHTML = ''; // 清空原有数据
    data.forEach((item, index) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${index + 1}</td>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.gender}</td>
        `;
        tbody.appendChild(row);
    });
}

（四）实现分页功能

1、在表格下方添加分页导航栏，包含“上一页”、“下一页”按钮和页码显示。

<div id="pagination">
    <button id="prevPage">上一页</button>
    <span id="pageInfo"></span>
    <button id="nextPage">下一页</button>
</div>

2、在 JavaScript 中添加分页逻辑，确定每页显示的记录数，例如每页显示 10 条数据，然后根据当前页码计算数据的起始索引和结束索引，只获取当前页的数据进行显示，当用户点击“上一页”或“下一页”按钮时，更新页码并重新发送 AJAX 请求获取相应页的数据，示例代码如下：

let currentPage = 1;
const pageSize = 10;
document.getElementById('prevPage').addEventListener('click', () => {
    if (currentPage > 1) {
        currentPage--;
        loadData();
    }
});
document.getElementById('nextPage').addEventListener('click', () => {
    currentPage++;
    loadData();
});
function loadData() {
    const start = (currentPage 1)  pageSize;
    const end = currentPage  pageSize;
    fetch(/getData?start=${start}&end=${end})
        .then(response => response.json())
        .then(data => {
            populateTable(data);
            updatePageInfo();
        });
}
function updatePageInfo() {
    document.getElementById('pageInfo').innerText =第 ${currentPage} 页;
}

服务器端需要根据请求参数中的start 和end 值来返回对应的数据子集。

（五）实现排序功能

1、为每个表头单元格添加点击事件监听器，当用户点击表头时，根据该列的数据进行排序，可以通过添加一个排序状态标识（如升序或降序）来实现切换排序方式，示例代码如下：

document.querySelectorAll('#excelTable th').forEach((th, index) => {
    th.addEventListener('click', () => {
        const columnIndex = index;
        const sortOrder = th.dataset.sortOrder === 'asc' ? 'desc' : 'asc';
        th.dataset.sortOrder = sortOrder;
        fetch(/getData?sortColumn=${columnIndex}&sortOrder=${sortOrder})
            .then(response => response.json())
            .then(data => {
                populateTable(data);
            });
    });
});

服务器端接收到排序请求后，按照指定的列和排序顺序对数据进行排序，然后返回给前端。

四、相关问题与解答

（一）问题：如果数据量非常大，一次性加载所有数据会导致性能问题吗？有什么优化方法？

解答：是的，一次性加载大量数据可能会导致性能问题，如页面加载缓慢、内存占用过高等，可以采用以下优化方法：

1、分页加载：如前面所述，将数据分成多个页面，每次只加载当前页的数据，减少一次性传输和渲染的数据量。

2、虚拟滚动：对于超长表格，可以使用虚拟滚动技术，只渲染可视区域内的行，当用户滚动表格时，动态加载和卸载行数据，提高渲染性能，这通常需要结合一些第三方库或自定义实现来实现。

3、懒加载：对于表格中的图片或其他大资源，可以采用懒加载方式，当这些资源进入可视区域时才进行加载，避免初始加载时加载不必要的资源。

4、数据压缩：在服务器端对数据进行压缩后再传输给前端，可以减少数据传输量，提高加载速度，前端接收到压缩数据后再进行解压处理。

（二）问题：如何实现表格数据的筛选功能？

解答：实现表格数据的筛选功能可以通过以下步骤：

1、添加筛选控件：在表格上方或侧边添加筛选条件的输入框或选择框，让用户可以选择要筛选的条件，对于“性别”列，可以添加一个下拉菜单，包含“男”“女”“全部”等选项；对于“年龄”列，可以添加两个输入框，分别表示年龄范围的上限和下限。

2、监听筛选事件：为筛选控件添加事件监听器，当用户改变筛选条件时，触发筛选操作，当用户选择性别为“男”时，发送一个包含筛选条件的 AJAX 请求到服务器。

3、服务器端筛选数据：服务器端接收到筛选请求后，根据筛选条件对数据进行过滤，只返回符合条件的数据子集给前端，如果筛选条件是性别为“男”，则服务器查询数据库时只获取性别为“男”的记录。

4、前端更新表格：前端接收到筛选后的数据后，调用populateTable 函数更新表格显示，可以在页面上显示当前的筛选条件，方便用户了解筛选状态。