I need to get the values from the hidden column of a Jquery Datatables where the checkbox has been selected (in the first visible column). So far I've got
bodytable$ = $('#dataTable').dataTable({
"bJQueryUI" : true,
"bPaginate" : true,
"bSort" : false,
"bFilter": false,
"aoColumns": [{"bVisible": false},
{"bVisible": true},
{"bVisible": true},
{"bVisible": true}],
"oLanguage": {
"sEmptyTable": '',
"sInfoEmpty": '',
"sZeroRecords": ''
}
});
and I'm getting the values from the hidden column with
var checkIds = [];
$('input[type="checkbox"]:checked', bodytable$.fnGetNodes()).each(function(i){
var tr = $(this).closest('tr');
var rowData = bodytable$.fnGetData(tr);
checkIds.push(rowData[0]);
});
alert(checkIds);
This fails on the line var rowData = bodytable$.fnGetData(tr); with Firefox debug giving the error message TypeError: a.nodeName is undefined
I have to go through the DataTable API because the hidden column doesn't actually appear in the html loaded into the browser and, because I want to be able to select the data values when the selected checkboxes aren't on the same page.
Following on from mainguys response, and using CSS to hide the column instead of the bVisible property, I can now get what I want with;
var checkIds = [];
$('input[type="checkbox"]:checked', bodytable$.fnGetNodes()).each(function(i){
var tr = $(this).closest('tr');
checkIds.push($(tr).find('td:eq(0)').text());
});
alert(checkIds);
$(". call-checkbox:checked", {"page": "all"}); //Now loop through all the selected checkboxes to perform desired actions rowcollection. each(function(index,elem){ //You have access to the current iterating row var checkbox_value = $(elem).
function uncheckRow(trId) {<br> var table = $('#example'). DataTable(); var row = table. row("#"+trId); var rowData = row. data(); var name = rowData[1]; var age = rowData[2]; // need to check if the check box in the 1st column(rowData[0]) is checked or not, If it is checked, i have to uncheck … }
$('#Request tbody'). on('click', 'tr', function () { if ($(this). hasClass('selected')) { $(this). removeClass('selected'); } else { oTable.
Found a trick how to do this.
Don't hide the collumn, just assign a class with display:none
to it.
"aoColumns": [{
"bVisible": true
}, {
"bVisible": true, sClass:"hideme"
}, {
"bVisible": true
}]
CSS:
.hideme {
display:none;
}
Now find them with this:
var checkIds = [];
bodytable$.$('tr').each(function(index,rowhtml){
var checked= $('input[type="checkbox"]:checked',rowhtml).length;
if (checked==1){
checkIds.push($('.hideme',rowhtml).text());
}
});
alert(checkIds);
Yes, i know this is not very elegant, but it works. Try it here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With