Question

我有jquery数据表，其中包含从数据库中提取的数据。默认情况下，没有过滤，它具有该用户所需的所有数据。除了jquery数据表自己的搜索之外，还在输入字段中进行自定义搜索。现在我想实现一个复选框操作，如果选中复选框，则会根据元素data-attribute过滤掉数据。

这是复选框：

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

数据广告的第一列是<td>元素，其中data-insub=x属性x is 1 || x is 0（<td data-insub='1'>或<td data-insub='0'>）。

在脚本中，我检测到复选框更改：

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

现在我想过滤掉所有将数据属性data-insub设置为0的玩家（保留那些将其作为1的玩家）。我认为简单搜索在这里是不够的，因为这适用于在表中写入而不在数据属性上的数据。

这是生成表行数据的PHP（更多的是我的代码的信息部分，因为我认为它与我遇到的问题无关。）。

$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;

Answer 1

您可以使用jQuery 隐藏（）和 show（）

隐藏属性 data-insub =“1”的所有行使用：

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

显示属性 data-insub =“1”的所有行使用：

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

Answer 2

由于我找不到使用数据属性的方法，我为我的行创建了类 - 如果我希望过滤它我添加了类allplayers如果我希望它留下来我添加了类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;
        }

    });

诀窍是，具有班级insub的元素也需要有班级allplayers。

根据数据属性从jquery数据表中过滤掉数据

2 个答案: