时间戳

首页 > 解决方案 > 如何将模态弹出窗口添加到数据表

jquery - 如何将模态弹出窗口添加到数据表

问题描述

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

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

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

解决方案 https://datatables.net/examples/advanced_init/events_live.html

我读了这两本书，但我仍然不知道如何使它与我的编辑链接一起工作。

在单击带有类 dlgTrigger的链接时，弹出窗口打开。简单的事情，但不是这个数据表组合，也没有进一步的 js 知识。

希望有人可以帮助我了解如何在此数据表 js 中定义链接。

这就是我的表格的样子（举个例子的简短形式）：

<script>
$(document).ready(function() {
    $('#syslog').DataTable({
    order: [[ 0, "desc" ]],
    pageLength: 10,
    "lengthMenu": [ [10, 30, 60, 120, -1], [10, 30, 60, 120, "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>

标签： jquerydatatables

解决方案

您需要使用 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>

推荐阅读