Ajax获取PHP端csv转的json数据并js前端排序与分页
<?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复制粘贴
姓名学号身份证号科目1科目2科目3科目4科目5科目.科目N
李一100010019000100187847591837687
李二100010029000100295818171608299
李三100010039000100368806579687191
李四100010049000100482807590876481
李五100010059000100560646171738561原文地址：https://blog.csdn.net/YUJIANYUE/article/details/143814314
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！