Modifying the Select All checkbox click state actions

kthorngren

Good afternoon,

I have a datatable that has multiple columns with checkboxes using the select extension. I need to modify the action that the 'Select All' checkbox performs in the header row. I am using the rowCallback function that pre-checks the checkboxes if the value from my database query is 1, and storing the IDs on the same row as the checked column into an array. The ID column is the first one in the table, the array 'saveChecksPreAEOG' holds the original values, and the other array 'saveChecksPreAE' holds any new IDs that need their records updated on the database . The table loads with the correct checkboxes checked if the value is equal to 1. I'm then using the onClick event for the select all header row, and if checked, storing all the IDs for each row into another array used to update the database on form submission. If un-checked, I'm looping through each row comparing the ID values from the original array to the row ID and attempting to set the checked state of that row/column.

For the first checkbox column located on the 9th column in my table:

$('th:nth-child(9) input').on('click', function(){
        
        if ($(this).is(':checked')){
            //alert('Pre-Algebra Enrolled All Checked.  Original Pre-Algebra enrolled: ' + saveChecksPreAEOG)
            //alert('All Checked!');
            // Store all checkboxes checked into array
            $('tr td:nth-child(9) input').each(function() {
                var currentRowPreEA=$(this).closest('tr');
                var col0PreEA=currentRowPreEA.find('td:eq(0)').html();
                        $('td:nth-child(9) input',currentRowPreEA).attr('checked','checked');
                        saveChecksPreAE.push(col0PreEA);        
            });
    
        }
        else
        {
            saveChecksPreAE = [];
            $('td:nth-child(9) input').attr('checked',false);
            $('tr td:nth-child(9) input').each(function(){
                var rowPAE = $(this).closest('tr');
                var preAlgETXID = rowPAE.find('td:eq(0)').html();
                $.each(saveChecksPreAEOG, function (indexPreAE, valuePreAE){
                    if(valuePreAE == preAlgETXID){      
                        $('td:nth-child(9) input', rowPAE).attr('checked','checked');
                    }   
                });
                
            });
        }

        });

None of my attr('','') seem to be working with the default datatable 'Select All' checkbox. However, if I use the checkbox render function, the checkboxes stay checked with the original values if the 'Select All' is un-checked. I have to create my own select all checkboxes, and format the headers to display correctly. Also, I noticed using this approach, my filters on every column but the first is removed.

  render: function ( data, type, row ) {
          
                var checkbox = $('<input/>',{
                        'type': 'checkbox',
                        'class':'editor-completed'
                     });
                return data;
            },
            className: "dt-body-center"
            }]

I'm looking to use the default datatable select all checkboxes in the table header, but need the checkboxes to stay checked with the original values if the 'Select All' is un-checked. Any insight will be greatly appreciated.

-Daniel

kthorngren

None of my attr('','') seem to be working with the default datatable 'Select All' checkbox.

Datatables doesn't provide a Select All checkbox. Could be you are using the Gyrocode checkbox plugin. Are you using the Select extension?

Its hard to say what is happening with the code snippets provided. Please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin