CODEWITHSUNDEEP
javascriptjqueryhtmldatatables
Banana
Banana

Reputation: 824

Filter out data from jquery datatables based on data attribute

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;

Upvotes: 1

Views: 1316

Answers (2)

Banana
Banana

Reputation: 824

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.

Upvotes: 0

Zahidul Islam
Zahidul Islam

Reputation: 125

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();

Upvotes: 1

Related Questions