如何将 Modal PopUp 添加到数据表

如何解决如何将 Modal PopUp 添加到数据表

我正在使用带分页的数据表，并且在我拥有的每一行中我通过模态弹出窗口加载的编辑功能。

如果我更改页面，dom 丢失了，因此我无法再将编辑功能作为模态弹出窗口打开。

问题： https://datatables.net/faqs/#events

解决办法 https://datatables.net/examples/advanced_init/events_live.html

我阅读了两者，但我仍然不知道如何使用我的编辑链接使其工作。

点击带有 class dlgTrigger 的链接，弹出窗口会打开。简单的事情，但不是使用这种数据表组合并且没有进一步的 js 知识。

希望有人能帮助我理解如何在这个数据表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">&nbsp;</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">&nbsp;</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">&times;</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>