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

Share Improve this question Follow edited May 23, 2017 at 10:27 CommunityBot 111 silver badge asked Oct 14, 2015 at 17:07 smalhotsmalhot 4311 silver badge77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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/