mercredi 4 décembre 2019

checking all the checkboxes

Trying to check all checkboxes in a datatable. I have gotten this to work before, and I'm not sure why it's failing.

Here is are the datatable headers. The first one includes the checkbox input:

<table id="example1" class="table table-bordered table-hover table-condensed">
  <thead>
    <tr>
      <th><input name="select_all" value="1" id="select_all" type="checkbox" /></th>
      <th>another header</th>
      <th>and another</th>
      <th>few more headers</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

I really do not want to post any of the code that generates the datatable, but just in case:

function displayRecords()
{
  $.ajax({
    url: 'process/getNVR.php',
    type: 'POST',
    data: '',
    success: function(data, textStatus, jqXHR) {
      var jsonObject = JSON.parse(data); 
      var table = $('#example1').DataTable({
        "dom": "Rlfrtip",
        "data": jsonObject,
        "columns": [
          {
            "data": "",
            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
            {
              $(nTd).html("<input type='checkbox' class='checkEdit' id='checkEdit' data-checkbooking='"+oData.booking+"' />");
            }
          },
          { "data": "ANOTHER_HEADER" },
          { "data": "AND_ANOTHER" },
          { "data": "FEW_MORE_HEADERS" }
        ],
        "iDisplayLength": 50,
        "order": [[ 1, "desc" ]],
        "paging": true,
        "scrollY": 550,
        "scrollX": true,
        "bDestroy": true,
        "stateSave": true,
        "scrollCollapse": true,
        "fixedColumns": {
          leftColumns: 2
        },
        "deferRender": true
      });
    },
    error: function(jqHHR, textStatus, errorThrown) {
      console.log('fail: '+ errorThrown);
      return false;
    }
  });
}

I really don't think I needed to post the code for the datatable. Maybe someone will see something that I added that is causing my problem. You will notice that the first column of the datatable will contain checkboxes for every record.

Here is the jquery that is supposed to detect when the header checkbox is checked:

$('#select_all').on('click', function()
{
  var table = $('#example1').DataTable();
  $(':checkbox', table.rows().nodes()).prop('checked', this.checked);   
  console.log('test');
});

As stated, I've successfully used this code before. I compared it to the previous projects where I used it. I don't see anything different.

I can't even get the console to show 'test' when the checkbox is clicked.

It's driving me crazy. This should work, but it's not.

What am I missing?




Aucun commentaire:

Enregistrer un commentaire