Retrieving value from inside checkbox column
Retrieving value from inside checkbox column
dsalinas
Posts: 7Questions: 3Answers: 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
Sorry, I'm new to posting and formatting looked off:
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:
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