Filter out data from jquery datatables based on data attribute

Question

I have jquery datatable which contains the data pulled from database. By default there's no filtering and it has all the data necessary for that user. There's custom search in input fields in addition to jquery datatables own search. Now i'd like to implement a checkbox action where if checkbox is checked, data is filtered out based on element data-attribute.

This is the checkbox:

<div class='checkbox' id='subplayers'>
    <label><input type='checkbox' value=''>Show filtered content</label>
</div>"

The first column of the datatables is a <td> element with an attribute data-insub=x where x is 1 || x is 0 (<td data-insub='1'> or <td data-insub='0'>).

In script i detect the checkbox change:

$('#subplayers').change(function() {
    if($(this).is(":checked")) {
        //Checked
        var playersInSub = document.querySelectorAll("[data-insub='1']");
    }
    else{
        //Not checked
    }     
});

Now i'd like to filter out all the players who have data-attribute data-insubset as 0 (keep the ones which have it as 1). I think simple search is not sufficient here as this works on data written in table not on data attribute.

This is the PHP which is generating the table row data (more of an informative part of my code as i don't think it's relevant to the problem i'm having.).

$pid = $player['pid'];
$fname = $player['fname'];
$lname = $player['lname'];
$club = $player['club'];
$sameTourney = false;
if (in_array($pid, $playerIds)){
    $sameTourney = true;
}
$sameSub = false;
if (in_array($pid,$subPlayers)){
    $sameSub = true;
}
echo "<tr id='col+'".$playernumber."_filter'>";
    if ($sameSub){
        echo "<td class='playernumber' data-insub='1'>".$playernumber."</td>";
    }
    else{
        echo "<td class='playernumber' data-insub='0'>".$playernumber."</td>";
    }
    echo "<td class='firstnames'>".$fname."</td>";
    echo "<td class='lastnames'>".$lname."</td>";
    echo "<td class='clubnames'>".$club."</td>";
    if ($sameTourney){
        echo "<td><a href='#' class='modifyplayer' id='removeModify".$pid."' data-actiontype='remove' data-playerid='".$pid."'>Remove</a></td>";
    }
    else {
        echo "<td><a href='#' class='modifyplayer' id='addModify".$pid."' data-actiontype='add' data-playerid='".$pid."'>Add</a></td>";
    }

echo "</tr>";
$playernumber += 1;

Zahidul Islam · Accepted Answer · 2017-09-20 09:05:03Z

1

You can use jQuery hide() and show()

Hide all rows with attribute data-insub="1" use:

$("table").find("[data-insub='1']").hide();

Show all rows with attribute data-insub="1" use:

$("table").find("[data-insub='1']").show();

answered Sep 20, 2017 at 9:05

Zahidul Islam

1251 silver badge5 bronze badges

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

2 Comments

Banana Over a year ago

This would work if all the table elements are shown and the table entries are not on separate table pages (for example, if there are 25 elements in the table and 10 elements are shown per page, then there would be 3 pages - 10, 10 and 5 elements). Elements are hidden only from the first page.

Zahidul Islam Over a year ago

Why not filter in the server side or send a json object back to client which will make life so much easy.

Banana · Accepted Answer · 2017-09-20 10:15:34Z

0

As i couldn't find a way to do it with data attributes, i made classes for my rows - if i wish to filter it out i added class allplayers and if i wished it to stay i added class insub.

$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
        var myRowClasses = oSettings.aoData[iDataIndex].nTr.className.split(" ");
        if($("#subplayers").is(":checked")) {
            return myRowClasses.indexOf('insub') > -1;
        }
        else{
            return myRowClasses.indexOf('allplayers') > -1;
        }

    });

The trick is that elements who have class insub need to have class allplayersas well.

answered Sep 20, 2017 at 10:15

Banana

8241 gold badge9 silver badges30 bronze badges

Collectives™ on Stack Overflow

Filter out data from jquery datatables based on data attribute

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related