XH_Digital_Management/templates/modify_record_modal.html

58 lines
2.1 KiB
HTML

<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="exampleModalCenterTitle">{modal_title}</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">
<tr>
{% for column in columns %}
<th>{{ column }}</th>
{% endfor %}
</tr>
</thead>
<tbody class="text-center" style="color: white;">
{% for record in records %}
<tr>
{% for field in record %}
<td>{{ field }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
<nav>
<ul class="pagination justify-content-end">
<!-- 分页按钮将由JS代码动态填充 -->
</ul>
</nav>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
<script>
function fetchModifyRecords(page) {
// 使用modify_records_url发起AJAX请求
$.ajax({
type: 'GET',
url: '{{ modify_records_url }}', // 使用模板变量来设置URL
data: {
page: page
},
// ...[其他代码]...
});
$(document).on('click', '.pagination .modify-page', function(event) {
event.preventDefault();
const page = $(this).data('page');
fetchModifyRecords(page);
});
}
</script>