javascript - Datatables: Hide rows based on hidden column value - Stack Overflow

admin管理员组

文章数量:1418627

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/

本文标签： javascriptDatatables Hide rows based on hidden column valueStack Overflow