I am using dataTable plugin to display my table in jsp. I want to use check box option with it too. Something like here

DataTables: filter rows based on value in column

In this case the values of Types is not hidden. But in my table the value of first column is hidden. How to write JavaScript in that case.

My datatable looks like this:

var userTable = $("#users").dataTable({
                    "sPaginationType": "full_numbers",
                    "bPaginate": true,
                    "bScrollCollapse": true,
                    "iDisplayLength": 10,
                    "bFilter": false,
                    "bJQueryUI": true,
                    "aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }],

                });

I am able to use the solution given in the link only when the column values are not hidden.

function Clear() {    
    $('#users tr').show();}function Search(word) {
    Clear();
$('#users tr > td:first-child').each(function () {
        if ($(this).html() != word) {
             $(this).parent().hide();
        }
     });
}

My labels look like this:

<label>
  <input type="radio" name="RadioGroup1" value="radio1" id="radio1" onclick="Search('1')"/>
  Enabled</label>
<label>
  <input type="radio" name="RadioGroup1" value="radio2" id="radio2" onclick="Search('0')"/>
  Disabled</label>
  <label>
  <input type="radio" name="RadioGroup1" value="radio3" id="radio3" onclick="Clear()"/>
  All</label>

I am using dataTable plugin to display my table in jsp. I want to use check box option with it too. Something like here

DataTables: filter rows based on value in column

In this case the values of Types is not hidden. But in my table the value of first column is hidden. How to write JavaScript in that case.

My datatable looks like this:

var userTable = $("#users").dataTable({
                    "sPaginationType": "full_numbers",
                    "bPaginate": true,
                    "bScrollCollapse": true,
                    "iDisplayLength": 10,
                    "bFilter": false,
                    "bJQueryUI": true,
                    "aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }],

                });

I am able to use the solution given in the link only when the column values are not hidden.

function Clear() {    
    $('#users tr').show();}function Search(word) {
    Clear();
$('#users tr > td:first-child').each(function () {
        if ($(this).html() != word) {
             $(this).parent().hide();
        }
     });
}

My labels look like this:

<label>
  <input type="radio" name="RadioGroup1" value="radio1" id="radio1" onclick="Search('1')"/>
  Enabled</label>
<label>
  <input type="radio" name="RadioGroup1" value="radio2" id="radio2" onclick="Search('0')"/>
  Disabled</label>
  <label>
  <input type="radio" name="RadioGroup1" value="radio3" id="radio3" onclick="Clear()"/>
  All</label>

• javascript
• datatable

1 Answer 1

You can use the afnFiltering functionality of datatables

$.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
    var $radio = $("input[name='RadioGroup1']:checked").val();
    // show everything
    if ($radio == "all")
        return true;
    else // Filter column 1 where matches RadioGroup1.value
        return aData[0] == $radio;
});

http://jsfiddle/np8875Lm/1/