115 lines
4.7 KiB
HTML
115 lines
4.7 KiB
HTML
{% load static %}
|
|
|
|
<div id="modifyRecordsModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
|
|
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modalTitle"></h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table">
|
|
<thead class="text-center">
|
|
<!-- 表头内容 -->
|
|
</thead>
|
|
<tbody class="text-center" style="color: white;">
|
|
<!-- 通过AJAX填充的表格内容 -->
|
|
</tbody>
|
|
</table>
|
|
<nav>
|
|
{# <span>记录总数: <span id="totalRecords"></span></span>#}
|
|
<ul class="pagination justify-content-end">
|
|
<!-- 分页按钮将由JS代码动态填充 -->
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{% static 'js/jquery.com_jquery-3.6.0.js' %}"></script>
|
|
|
|
<script>
|
|
function fetchAuditRecords(page) {
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: '{{ url.modify_record }}',
|
|
data: {
|
|
page: page
|
|
},
|
|
success: function (response) {
|
|
if (response.modal_title) {
|
|
$('#modalTitle').text(response.modal_title);
|
|
|
|
// 清空模态框中的表头
|
|
var thead = $('#modifyRecordsModal thead');
|
|
thead.empty();
|
|
|
|
// 动态创建表头
|
|
var headerRow = $('<tr>');
|
|
response.columns.forEach(function (columnName) {
|
|
headerRow.append($('<th>').text(columnName));
|
|
});
|
|
thead.append(headerRow);
|
|
|
|
// 清空表格现有的数据
|
|
var tbody = $('#modifyRecordsModal tbody');
|
|
tbody.empty();
|
|
|
|
// 填充新数据
|
|
response.records.forEach(function (record) {
|
|
var row = $('<tr>');
|
|
// 使用Object.keys或者for...in循环来迭代记录中的所有键
|
|
Object.keys(record).forEach(function (key) {
|
|
// 为每个属性创建一个表格单元格并追加到行上
|
|
var cell = $('<td>').text(record[key]);
|
|
row.append(cell);
|
|
});
|
|
// 将完整的行追加到表格主体中
|
|
tbody.append(row);
|
|
});
|
|
|
|
// 显示总记录数
|
|
$('#totalRecords').text(response.total_items);
|
|
|
|
|
|
// 更新分页
|
|
var pagination = $('#modifyRecordsModal .pagination');
|
|
pagination.empty(); // 清空现有的分页按钮
|
|
|
|
// 添加"上一页"按钮
|
|
if (response.has_previous) {
|
|
pagination.append($('<li class="page-item"><a class="page-link" href="#" data-page="' + (response.current_page - 1) + '">上一页</a></li>'));
|
|
}
|
|
|
|
// 添加页码按钮
|
|
for (let i = 1; i <= response.num_pages; i++) {
|
|
var pageItem = $('<li>').addClass('page-item');
|
|
if (response.current_page === i) pageItem.addClass('active');
|
|
var pageLink = $('<a>').addClass('page-link').attr('href', '#').text(i).attr('data-page', i);
|
|
pageItem.append(pageLink);
|
|
pagination.append(pageItem);
|
|
}
|
|
|
|
// 添加"下一页"按钮
|
|
if (response.has_next) {
|
|
pagination.append($('<li class="page-item"><a class="page-link" href="#" data-page="' + (response.page + 1) + '">下一页</a></li>'));
|
|
}
|
|
}
|
|
},
|
|
});
|
|
}
|
|
|
|
// 页面加载完毕后，第一次获取数据
|
|
$(document).ready(function () {
|
|
fetchAuditRecords(1); // 默认加载第一页
|
|
});
|
|
|
|
// 监听分页按钮的点击事件
|
|
$('#modifyRecordsModal .pagination').on('click', 'a.page-link', function (e) {
|
|
e.preventDefault();
|
|
var page = $(this).data('page');
|
|
fetchAuditRecords(page);
|
|
});
|
|
</script> |