Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to get the row containg a checked checkbox from a JQuery DataTable

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);
like image 871
user497087 Avatar asked Feb 27 '14 12:02

user497087


People also ask

How to get all checked checkbox value in jQuery DataTable?

$(". 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).

How check checkbox is checked or not in jquery DataTable?

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 … }

How do you check if a row is selected in jquery?

$('#Request tbody'). on('click', 'tr', function () { if ($(this). hasClass('selected')) { $(this). removeClass('selected'); } else { oTable.


1 Answers

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

like image 68
mainguy Avatar answered Sep 29 '22 08:09

mainguy