mercredi 30 décembre 2015

How to hide and show rows in datatable with a checkbox

I have a datatable as follows:

<table id="dt_default" class="uk-table exclude_table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Number</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr class="aa">
            <td>1</td>
            <td>N1</td>
        </tr>
        <tr class="bb">
            <td>1</td>
            <td>N1</td>
        </tr>
        <tr class="cc">
            <td>1</td>
            <td>N1</td>
        </tr>
        <tr class="dd">
            <td>1</td>
            <td>N1</td>
        </tr>
    </tbody>
</table>

I have a set of checkbox as follows, which is placed above the datatable:

<div>
     AA<input type="checkbox" class="exclude" value="aa">
     BB<input type="checkbox" class="exclude" value="analysis">
     CC<input type="checkbox" class="exclude" value="progress">
     DD<input type="checkbox" class="exclude" value="done">
</div>

What I need is: When a checkbox is checked the class corresponding to its value must hide from the table and when it is unchecked, it should show it back.

Eg: If you check the checkbox AA, the value corresponding to it is aa. So class aa must be hidden from table and when it is unchecked, it must show again.

The script I have tried for this is:

$('.exclude').click(function() { 
    $(".exclude").each(function(){
        if ($(this).prop('checked')==true)
        { 
            var hidden = $(this).attr("value");
            $.fn.dataTableExt.afnFiltering.push(
            function( oSettings, aData, iDataIndex ) {
                var row = oSettings.aoData[iDataIndex].nTr;
                return $(row).hasClass(hidden) ? false : true;
            }
            );
         }
        });                  
    });

This code is not working as expected.

What it does is, it hides the corresponding class when a checkbox is checked and then we do either search/sort in datatable. Not directly when the checkbox is checked.

Also how to show the row back when checkbox is unchecked ?




Aucun commentaire:

Enregistrer un commentaire