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

Question

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);

mainguy · Accepted Answer · 2014-02-27 14:25:08Z

5

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

answered Feb 27, 2014 at 14:25

mainguy

8,3312 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user497087 Over a year ago

You sir are a genius! The trick is, as you say, to hide the column with CCS rather than the dataTable bVisible property. This now leaves the column in the HTML and I've edited my question to give my final solution.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related