Retrieving value from inside checkbox column

Retrieving value from inside checkbox column

dsalinasdsalinas Posts: 6Questions: 2Answers: 0

Hello,
I have a datatable that has multiple column checkboxes. Each column that has a checkbox has an ID that is being rendered via a query from my database. Up until recently I had only implemented datatables that had only one column checkbox and used the row selection extension that works great. Now, I'm implementing a datatable that will have multiple column checkboxes that will be selected individually.
I'm attempting to get the value from inside the columns that have a checkbox checked. So far, I have not been able to get any values using the onClick jquery with an alert box for testing. Code:

Datatable initialization:

<script type="text/javascript">

$(document).ready(function(){
    $.fn.dataTable.ext.errMode = 'none';
// Setup Data Table
    $('#studentAtt').DataTable(
        {
            
            'initComplete': function(setings,json){
                $('div.overlay').remove();
            },
            'lengthChange':false,
                'processing': true,
            'orderClasses': false,
            'scrollY': 300,
            'scroller':false,
            'paging':true,
            'pageLength': 50,
            'scrollCollapse':false,
                        'columnDefs': [
                 {
                    'targets': [0,10,11],
                    'checkboxes': {
                       'selectRow': false
                    }
                 },
                {
                     'targets':[1],
                     'visible':false
                }
              ],
              'select': {
                 'style': 'multi'
              },
              'order': []

        });

                $('#studentAtt tbody').on('click','tr td:nth-child(1) input', function () {
            var currentRow1=$(this).closest('tr');
        var col1=currentRow1.find('td:eq(0)').text();
        alert('Column1 CHCKB Value: ' + col1 );
    } );
});
</script>

HTML datatable, being loaded by database query call:

<cfoutput>
<table id="studentAtt" class="display" cellspacing="0" style="width:100%;">
        <thead>
            <tr>
                 <th style="width:10px;"></th>
                <th style="font-size:10px; width:55px; ">State ID</th>
                <th style="font-size:10px; width:55px; ">Local ID</th>
                <th style="font-size:10px;">Last</th>
                <th style="font-size:10px;">First</th>
                <th style="font-size:10px;">Middle</th>
                <th style="font-size:10px;">Campus</th>
                <th style="font-size:10px;">Grade</th>
                <th style="font-size:10px;">Status</th>
                <th style="font-size:10px;">Pre. Alg. Enrolled</th>
                <th style="font-size:10px;">Pre. Alg. Completed</th>
            </tr>
        </thead>
        <tbody>
<cfloop query="getStudents">
<tr> 
<td width="10">>#GUID#</td>
<td style="font-size:10px; ">#TEXAS_UNIQUE_ID#</td> 
<td style="font-size:10px; ">#LOCAL_ID#</td> 
<td style="font-size:10px;">#STU_LAST#</td>
<td style="font-size:10px;">#STU_FIRST#</td>  
<td style="font-size:10px;">#STU_MIDDLE#</td> 
<td style="font-size:10px;">#CAMPUS#</td> 
<td style="font-size:10px;">#GRADE#</td> 
<td style="font-size:10px;">#STATUS#</td> 
<td >#GUID#</td>
<td>#GUID#</td>


</tr> 
</cfloop>
</tbody>
<tfoot></tfoot>
</table>
</cfoutput>

The alert box doesn't display anything, however If I change the column to the second column, TEXAS_UNIQUE_ID, I get the value in this colunm:

                $('#studentAtt tbody').on('click','tr td:nth-child(1) input', function () {
            var currentRow1=$(this).closest('tr');
        var col1=currentRow1.find('td:eq(1)').text();
        alert('Column1 CHCKB Value: ' + col1 );
    } );

I have also tested, changing third line above to:
var col1=currentRow1.find('td:eq(0)').html();

but that only displays on the alert on click event:
"Column1 CHCKB Value: <input type="checkbox" class="dt-checkboxes">"

I can't seem to get the value below the checkbox assigned to the column. Any insight will be greatly appreciated.

Thanks,

Daniel

Answers

  • dsalinasdsalinas Posts: 6Questions: 2Answers: 0

    Sorry, I'm new to posting and formatting looked off:

    <script type="text/javascript">
    
    $(document).ready(function(){
        $.fn.dataTable.ext.errMode = 'none';
    // Setup Data Table
        $('#studentAtt').DataTable(
            {
                
                'initComplete': function(setings,json){
                    $('div.overlay').remove();
                },
                'lengthChange':false,
            'processing': true,
                'orderClasses': false,
                'scrollY': 300,
                'scroller':false,
                'paging':true,
                'pageLength': 50,
                'scrollCollapse':false,
                            'columnDefs': [
                     {
                        'targets': [0,9,10],
                        'checkboxes': {
                           'selectRow': false
                        }
                     },
                    {
                         'targets':[1],
                         'visible':false
                    }
                  ],
                  'select': {
                     'style': 'multi'
                  },
                  'order': []
    
            });
    
                  $('#studentAtt tbody').on('click','tr td:nth-child(1) input', function () {
                var currentRow1=$(this).closest('tr');
            var col1=currentRow1.find('td:eq(0)').html();
            alert('Column1 CHCKB Value: ' + col1 );
        } );
    });
        </script>
    
    /***** Table Being Loaded *****/
    
    <table id="studentAtt" class="display" cellspacing="0" style="width:100%;">
            <thead>
                <tr>
                     <th style="width:10px;"></th>
                    <th style="font-size:10px; width:55px; ">State ID</th>
                    <th style="font-size:10px; width:55px; ">Local ID</th>
                    <th style="font-size:10px;">Last</th>
                    <th style="font-size:10px;">First</th>
                    <th style="font-size:10px;">Middle</th>
                    <th style="font-size:10px;">Campus</th>
                    <th style="font-size:10px;">Grade</th>
                    <th style="font-size:10px;">Status</th>
                    <th style="font-size:10px;">Pre. Alg. Enrolled</th>
                    <th style="font-size:10px;">Pre. Alg. Completed</th>
                </tr>
            </thead>
            <tbody>
    <cfloop query="getStudents">
    <tr> 
    <td width="10">>#GUID#</td>
    <td style="font-size:10px; ">#TEXAS_UNIQUE_ID#</td> 
    <td style="font-size:10px; ">#LOCAL_ID#</td> 
    <td style="font-size:10px;">#STU_LAST#</td>
    <td style="font-size:10px;">#STU_FIRST#</td>  
    <td style="font-size:10px;">#STU_MIDDLE#</td> 
    <td style="font-size:10px;">#CAMPUS#</td> 
    <td style="font-size:10px;">#GRADE#</td> 
    <td style="font-size:10px;">#STATUS#</td> 
    <td >#GUID#</td>
    <td>#GUID#</td>
    
    
    </tr> 
    </cfloop>
    </tbody>
    <tfoot></tfoot>
    </table>
    
  • dsalinasdsalinas Posts: 6Questions: 2Answers: 0

    Original Question:
    I have a datatable that has multiple column checkboxes. Each column that has a checkbox has an ID that is being rendered via a query from my database. Up until recently I had only implemented datatables that had only one column checkbox and used the row selection extension that works great. Now, I'm implementing a datatable that will have multiple column checkboxes that will be selected individually.

    I'm attempting to get the value from inside the columns that have a checkbox checked. So far, I have not been able to get any values using the onClick jquery with an alert box for testing. Code:

  • colincolin Posts: 12,681Questions: 0Answers: 2,167

    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

Sign In or Register to comment.