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

小小小幸运 · 2024-11-17 10:24:26

<?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">
</tr>
</thead>
<tbody id="tableBody">
</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
李一 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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云