jquery - How to add Modal PopUp to Datatables

Question

I'm using datatables with pagination and within each row I have edit function that I load via modal popup.

If I change the page, dom got lost and so I can't open the edit function as modal popup anymore.

The problem: https://datatables.net/faqs/#events

The solution https://datatables.net/examples/advanced_init/events_live.html

I read both but I still can't figure out how to make it work with my Edit link.

On click link with class dlgTrigger the popup opens. Easy thing but not with this datatables combination and without further knowledge of js.

Hope someone can help me to understand how to define the link within this datatable js.

That's how my table looks like (short form to give an example):

<script>
$(document).ready(function() {
    $('#syslog').DataTable({
    order: [[ 0, "desc" ]],
    pageLength: 10,
    "lengthMenu": [ [10, 30, 60, 120, -1], [10, 30, 60, 120, "All"] ]
});
});
</script>

Table

<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>

Dialog

<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>

question from:https://stackoverflow.com/questions/65872918/how-to-add-modal-popup-to-datatables

Answer 1

You need to load modal using JavaScript or jQuery.

Hope this snippet will work for you.

$(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>