问题描述
我正在使用带分页的数据表,并且在我拥有的每一行中 我通过模态弹出窗口加载的编辑功能。
如果我更改页面,dom 丢失了,因此我无法再将编辑功能作为模态弹出窗口打开。
问题: https://datatables.net/faqs/#events
解决办法 https://datatables.net/examples/advanced_init/events_live.html
我阅读了两者,但我仍然不知道如何使用我的编辑链接使其工作。
点击带有 class dlgTrigger 的链接,弹出窗口会打开。简单的事情,但不是使用这种数据表组合并且没有进一步的 js 知识。
这就是我的表格的样子(举个例子的简短形式):
<script>
$(document).ready(function() {
$('#syslog').DataTable({
order: [[ 0,"desc" ]],pageLength: 10,"lengthMenu": [ [10,30,60,120,-1],[10,"All"] ]
});
});
</script>
表格
<table id="syslog">
<thead><tr><td>Report</td><td>Actions</td></tr></thead>
<tr><td>text123</td>
<td><a href="edit/report.PHP?id=123" class="dlgTrigger" title="Edit"><li class="fa fa-edit"> </li></a></td></tr>
<tr><td>text456</td>
<td><a href="edit/report.PHP?id=456" class="dlgTrigger" title="Edit"><li class="fa fa-edit"> </li></a></td></tr>
</table>
对话框
<script>
$(document).ready(function() {
$('A.dlgTrigger').click(function(event) {
event.preventDefault();
dlg = $('<div></div>').append(loading.clone());
dlg
.load($(this).attr('href'),function(response,status,xhr) {
if ( status=="error" ) {
alert("Dialog deFinition not available ("+xhr.status+" "+xhr.statusText+")");
//dlg.dialog("close");
}
})
.dialog({
title: $(this).attr('title'),width: 300,height: 300,modal: true,resizable: false,close: function() {
dlg.empty();
}
});
});});
// ]]></script>
解决方法
您需要使用 JavaScript 或 jQuery 加载模态。
希望这个片段对你有用。
$(document).ready(function(){
$("#myTable").DataTable();
$('.edit').click(function(){
$('#editModal').modal('show');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<table id="myTable">
<thead>
<tr>
<th> Name </th>
<th> Age </th>
<th> Action </th>
</tr>
</thead>
<tbody>
<tr>
<td> John </td>
<td> 30 </td>
<td><button class="edit"> Edit </button></td>
</tr>
<tr>
<td> John </td>
<td> 30 </td>
<td><button class="edit"> Edit </button></td>
</tr>
<tr>
<td> John </td>
<td> 30 </td>
<td><button class="edit"> Edit </button></td>
</tr>
<tr>
<td> John </td>
<td> 30 </td>
<td><button class="edit"> Edit </button></td>
</tr>
<tr>
<td> John </td>
<td> 30 </td>
<td><button class="edit"> Edit </button></td>
</tr>
</tbody>
</table>
<div class="modal" id="editModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>