Ajax获取PHP端csv转的json数据并js前端排序与分页

html 复制代码
<?php
setlocale(LC_ALL, 'C'); //window:删除行首双斜杠

if($_GET["act"]=="list"){
$csvFile = 'book.csv'; // 文件路径:制表符分隔文件
$data = [];
if (($handle = fopen($csvFile, 'r')) !== false) {
    $header = fgetcsv($handle,0,"\t"); // 读取表头
    while (($row = fgetcsv($handle,0,"\t")) !== false) {
        $data[] = array_combine($header, $row); // 将表头与数据组合
    }
    fclose($handle);
}
header('Content-Type: application/json');
echo json_encode($data);
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据表格</title>
<style>
.container {
    margin: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 5px;
    text-align: left;
}

th {
    background-color: #f5f5f5;
    position: relative;
    padding-right: 25px;
    cursor: pointer;
}

.sort-arrows {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    line-height: 8px;
}

.arrow {
    font-size: 8px;
    color: #666;
}

.arrow.active {
    color: red;
}

.pagination {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

button {
    padding: 5px 10px;
    cursor: pointer;
}

select {
    padding: 5px;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f5f5f5;
}
</style>
</head>
<body>
    <div class="container">
        <table id="dataTable">
            <thead>
                <tr id="headerRow">
                    <!-- 表头将由JS动态生成 -->
                </tr>
            </thead>
            <tbody id="tableBody">
                <!-- 数据行将由JS动态生成 -->
            </tbody>
        </table>
        <div class="pagination">
            <button id="firstPage">首页</button>
            <button id="prevPage">上一页</button>
            <select id="pageSelect"></select>
            <button id="nextPage">下一页</button>
            <button id="lastPage">尾页</button>
        </div>
    </div>
<script>
class DataTable {
    constructor() {
        this.data = [];
        this.currentPage = 1;
        this.rowsPerPage = 10;
        this.sortColumn = null;
        this.sortDirection = 'asc';
        
        this.init();
    }

    init() {
        this.loadData();
        this.bindEvents();
    }

    async loadData() {
        try {
            const response = await fetch('?act=list&tt=tt');
            const jsonData = await response.json();
            this.data = jsonData;
            this.setupTable();
            this.renderTable();
            this.setupPagination();
        } catch (error) {
            console.error('数据加载失败:', error);
        }
    }

    setupTable() {
        if (this.data.length === 0) return;
        
        const headerRow = document.getElementById('headerRow');
        headerRow.innerHTML = '';
        
        // 创建表头
        Object.keys(this.data[0]).forEach(key => {
            const th = document.createElement('th');
            th.innerHTML = `
                ${key}
                <div class="sort-arrows">
                    <span class="arrow up" data-column="${key}">▲</span>
                    <span class="arrow down" data-column="${key}">▼</span>
                </div>
            `;
            headerRow.appendChild(th);
        });
    }

    renderTable() {
        const tableBody = document.getElementById('tableBody');
        tableBody.innerHTML = '';

        // 排序数据
        let sortedData = [...this.data];
        if (this.sortColumn) {
            sortedData.sort((a, b) => {
                const aVal = a[this.sortColumn];
                const bVal = b[this.sortColumn];
                if (this.sortDirection === 'asc') {
                    return aVal > bVal ? 1 : -1;
                } else {
                    return aVal < bVal ? 1 : -1;
                }
            });
        }

        // 分页
        const start = (this.currentPage - 1) * this.rowsPerPage;
        const paginatedData = sortedData.slice(start, start + this.rowsPerPage);

        // 渲染数据行
        paginatedData.forEach(row => {
            const tr = document.createElement('tr');
            Object.values(row).forEach(value => {
                const td = document.createElement('td');
                td.textContent = value;
                tr.appendChild(td);
            });
            tableBody.appendChild(tr);
        });
    }

    setupPagination() {
        const totalPages = Math.ceil(this.data.length / this.rowsPerPage);
        const pageSelect = document.getElementById('pageSelect');
        pageSelect.innerHTML = '';

        for (let i = 1; i <= totalPages; i++) {
            const option = document.createElement('option');
            option.value = i;
            option.textContent = `第${i}页`;
            pageSelect.appendChild(option);
        }
    }

    bindEvents() {
        // 排序事件
        document.getElementById('headerRow').addEventListener('click', (e) => {
            const arrow = e.target.closest('.arrow');
            if (!arrow) return;

            const column = arrow.dataset.column;
            const isUp = arrow.classList.contains('up');

            // 重置所有箭头样式
            document.querySelectorAll('.arrow').forEach(a => a.classList.remove('active'));
            
            // 设置当前箭头样式
            arrow.classList.add('active');

            this.sortColumn = column;
            this.sortDirection = isUp ? 'asc' : 'desc';
            this.renderTable();
        });

        // 分页事件
        document.getElementById('firstPage').addEventListener('click', () => {
            this.currentPage = 1;
            this.renderTable();
        });

        document.getElementById('prevPage').addEventListener('click', () => {
            if (this.currentPage > 1) {
                this.currentPage--;
                this.renderTable();
            }
        });

        document.getElementById('pageSelect').addEventListener('change', (e) => {
            this.currentPage = parseInt(e.target.value);
            this.renderTable();
        });

        document.getElementById('nextPage').addEventListener('click', () => {
            const totalPages = Math.ceil(this.data.length / this.rowsPerPage);
            if (this.currentPage < totalPages) {
                this.currentPage++;
                this.renderTable();
            }
        });

        document.getElementById('lastPage').addEventListener('click', () => {
            this.currentPage = Math.ceil(this.data.length / this.rowsPerPage);
            this.renderTable();
        });
    }
}

// 初始化表格
document.addEventListener('DOMContentLoaded', () => {
    new DataTable();
});
</script>
</body>
</html>

数据示范:制表符分隔的,可以直接excel复制粘贴

html 复制代码
姓名	学号	身份证号	科目1	科目2	科目3	科目4	科目5	科目.	科目N
李一	10001001	90001001	87	84	75	91	83	76	87
李二	10001002	90001002	95	81	81	71	60	82	99
李三	10001003	90001003	68	80	65	79	68	71	91
李四	10001004	90001004	82	80	75	90	87	64	81
李五	10001005	90001005	60	64	61	71	73	85	61
相关推荐
哆啦A梦158819 分钟前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫27 分钟前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
Q_Q51100828534 分钟前
python基于web的汽车班车车票管理系统/火车票预订系统/高铁预定系统 可在线选座
spring boot·python·django·flask·node.js·汽车·php
yinuo35 分钟前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li1 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
WordPress学习笔记2 小时前
安装WordPress时没生成wp-config.php的解决方法
php·wp-config
浪裡遊2 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz4 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom4 小时前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1234 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js