jeudi 4 novembre 2021

Datatables Gyrocode checkbox extension, setting checked state per row based off of conditions

Good morning, I have an application that has multiple columns with checkboxes using the datatables gyrocode checkbox extension. I am setting the checked state of each column if the value is 1 in the cell using the rowCallback function on form load. At the same time i'm setting the checked state, I'm pushing an ID value on the same row to an array that is used later to compare which row to re-check when the 'Select All' checkbox is unchecked on each checkbox column. My problem is I cannot seem to re-check the checkboxes when the ID value in the array matches the ID value in the row. Everything else works, but this line of code that I'm using doesn't seem to set the checkbox state: $('td:nth-child(9) input', rowPAE).attr('checked','checked'); However, If i use the render: function to intialize the checkboxes, the above line does work, and sets the checked state if the ID's match. Full code: HTML:

<form>
<table border="1" bordercolor="#5B0001">
    <tr><th colspan="2"><center>APR Totals</center></th></tr>
    <tr><th>Element</th><th>Total Selected</th></tr>
    <tr><td><b>Pre-Algebra Enrolled:</b></td><td><input type="text" name="PreAlgEI" id="PreAlgEI" size="10" readonly="yes"></td></tr>
    </table>
</form>
<br />
<table id="studentAtt" class="display" cellspacing="0" style="width:100%;">
        <thead>
            <tr>
                <th>Texas Unique ID</th>
                <th>Local ID</th>
                <th>Last</th>
                <th>First</th>
                <th></th>
            </tr>
        </thead>
        <tbody>

</tbody>
</table>

jQuery Code:

$(document).ready(function() {
    
  data = [
    ['1234', '4321', 'Test1', 'User','1'],
    ['12345', '54321', 'Test2', 'User','0'],
     ['123456', '654321', 'Test3','User','1'],
     ['23456', '65432', 'Test4','User','1'],
     ['3456', '6543', 'Test5','User','0']
  ]
    
    /***** Pre-Algebra Arrays ***/
    var removeChecksPreAE = [];
    var saveChecksPreAE = [];
    var saveChecksPreAEOG = []; // Used to store the original loaded IDs from database on form load.
  
  var preAECount = 0;
  
// Setup Data Table
  var t = $('#studentAtt').DataTable(
        {
            
            "data":data,
            /*'columns': [
            {
            render: function ( data, type, row ) {
          
                var checkbox = $('<input/>',{
                        'type': 'checkbox',
                        'class':'editor-completed'
                     });
                return data;
            },
            className: "dt-body-center"
            }],*/
             rowCallback: function ( row, data ) {
                
            if (data[4] == 1){
                $('td:nth-child(5) input', row).attr('checked','checked');
                saveChecksPreAEOG.push(data[0]);
        preAECount += 1;
            }
                 
        },
            'columnDefs': [
                 {
                    'targets': 4,
                    'checkboxes': {
                       'selectRow': false
                    }
                 }
              ],
              'select': {
                 'style': 'multi'
              },
              'order': []

        });
    // Set total selected value on form load
     document.getElementById('PreAlgEI').value = preAECount;
    
    /******** Pre-Algebra Enrolled, select all checkbox on first row, header **************/
$('th:nth-child(5) input').on('click', function(){
        preAECount = 0;
        if ($(this).is(':checked')){
        
            $('td:nth-child(5) input').attr('checked','checked');
            
            // Store all checkboxes checked into array
            $('tr td:nth-child(5) input').each(function() {
      preAECount += 1;
                var currentRowPreEA=$(this).closest('tr');
                var col0PreEA=currentRowPreEA.find('td:eq(0)').html();
                        $('td:nth-child(5) input',currentRowPreEA).attr('checked','checked');
                        saveChecksPreAE.push(col0PreEA);
                        
            });
    
        }
        else
        {
            saveChecksPreAE = [];
            $('td:nth-child(5) input').attr('checked',false);
            $('tr td:nth-child(5) input').each(function(){
            

                var rowPAE = $(this).closest('tr');
                var preAlgETXID = rowPAE.find('td:eq(0)').html();
        
                $.each(saveChecksPreAEOG, function (indexPreAE, valuePreAE){
                    if(valuePreAE == preAlgETXID){
                            preAECount -= 1;
                        $('td:nth-child(5) input', rowPAE).attr('checked','checked');
                    }   
                });
                
            });     
        }
    
                preAECount = Math.abs(preAECount);
         document.getElementById('PreAlgEI').value = preAECount;

        });
      
/***. Handle individual checkboxes checked/un-checked, column 5 *****/
$('td:nth-child(5) input').on('click', function(){
            if($(this).is(':checked')){
                preAECount += 1;
        }
        else{
            preAECount -= 1;
        }

                preAECount = Math.abs(preAECount);
         document.getElementById('PreAlgEI').value = preAECount;
});
  
   });

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

My thought is that I need to use different syntax to set the checked state using the Gyrocode checkbox extension. Any guidance will be greatly appreciated.

Thanks, Daniel




Aucun commentaire:

Enregistrer un commentaire