Modifying the Select All checkbox click state actions

dsalinas

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

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

dsalinas

Thanks Colin, I'm working on getting a jFiddle to post on this message. Hope to have the link with the test case in the next few days.

-Daniel

dsalinas

Hello everyone,
Please see below for the JSFiddle. If you notice on load, rows 1 and 3 are pre-checked using the rowCallback function. What I'm trying to accomplish here, is if you click on the 'Select All' checkbox on the header row, and then 'De-Select All' checkbox, re-check the boxes that were previously checked on page load.

JSFiddle:
https://jsfiddle.net/Daniel_S_EGT/y84tdac0/30/

I'm using the Gyrocode Select Checkbox extension:
https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

Any help would be greatly appreciated.

-Daniel

kthorngren

Likely this capability is not built into the Gyrocode checkboxes plugin. You will need to check with the developer for specifics about the plugin.

You will probably need to keep track of the selected rows and when the select all checkbox is unchecked re-select those rows. Use the select and deselect events to keep track of the rows selected or deselected using the indexes parameter. Use a global array variable to keep an array of selected indexes.

Create an event handler for the select all checkbox. Inspect the page to find the selector you will need for the event. In the event handler, if the checkbox is unchecked, use the global array of indexes to reselect those rows.

Kevin