Modal Test 2

by Frank Long

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/b-print-2.2.2/date-1.1.2/fc-4.0.2/fh-3.2.2/kt-2.6.4/r-2.2.9/rg-1.1.4/sc-2.0.5/sp-2.0.0/sl-1.3.4/sr-1.1.0/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/b-print-2.2.2/date-1.1.2/fc-4.0.2/fh-3.2.2/kt-2.6.4/r-2.2.9/rg-1.1.4/sc-2.0.5/sp-2.0.0/sl-1.3.4/sr-1.1.0/datatables.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<button onclick="$('#myModal').modal()">
Foo
</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

<table id="example" class="table table-striped table-bordered nowrap" style="width:100%">
    <thead>
        <tr>
            <th><input class="toggle-all-checkbox" type="checkbox" /></th>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input class="select-row-checkbox"...

JavaScript

$(document).ready(function() {
  $('#example').DataTable({
    dom: 'ftipr',
    
    initComplete: setTableEvents
  });
});

function setTableEvents(settings, json) {
  var exampleTable = $('#example').DataTable();

  exampleTable.on('select', function(e, dt, type, indexes) {
    console.log("inside select event");
    if (type === 'row') {
      // event returns indexes of all selected rows
      for (let thisIndex of indexes) {
        // Check the input checkbox - has class 'select-row-checkbox'
        exampleTable.rows(thisIndex).nodes().to$().find('.select-row-checkbox').prop("checked", true);
      }
    }
  });

  exampleTable.on('deselect', function(e, dt, type, indexes) {
  	console.log("inside deselect event");
    if (type === 'row') {
      for (let thisIndex of indexes) {
        // uncheck the checkbox control
        exampleTable.rows(thisIndex).nodes().to$().find('.select-row-checkbox').prop("checked", false);
      }
    }
  });
}