Question

我试图根据隐藏列中的数据隐藏/显示某些行。我的表结构如下：

<table id="agent_search" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
    <thead>
        <th>Agent ID</th>
        <th>Agent Name</th>
        <th>ID Number</th>
        <th>Mobile Number</th>
        <th>Team Name</th>
        <th>Status</th>
        <th></th>
    </thead>
</table>

我正在尝试使用复选框隐藏/显示基于Status列的记录。如果状态== DEREGISTERED我想将其从表格中排除（未选中复选框）。

我根据所做的here改编了我的代码：

$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
    // does not run this
    console.log("GOTHRERE"); 
    if ('agent_search' == oSettings.nTable.id) {
        // console.dir(oSettings);
        console.dir(aData);

        var dereg = aData[5];
        console.log(dereg);
        if (dereg == "DEACTIVATED"){
                return $('#toggle_deregistred').is(':checked');
        } else {
            return $('#toggle_deregistred').is(':not:checked');
        }
    } 

    return true;
});

我尝试使用$.fn.dataTableExt.afnFiltering女巫用于custom filtering，却发现我无法做到。曾经可以在this案例中的dataTables的早期版本中使用它，但事实证明它是bug允许:|成为可能。

有没有办法可以根据Status使用复选框来过滤行？或者我可以使用的api中有什么东西我看过了吗？

更新

我已经创建了一个jsfiddle，它正在调整我的代码以将其放入jsfiddle，我注意到bServerSide导致{{1}不工作。用户服务器端处理是否有解决方法或其他方法？

Answer 1

我找到了另一种隐藏/显示checkbox的方式。

我使用Bootstrap 3 tabs来应用不同的过滤器：

<ul class="nav nav-tabs form-tabs" id="search-tabs">
    <li id="basic-list" class="active"><a data-toggle="tab" data-dtname="all" href="#all">All</a></li>
    <li class="" id="dereg-list"> <a data-toggle="tab" data-dtname="dereg" href="#dereg">Deregistered</a></li>
</ul>
<br>
<div class="tab-content">
    <fieldset id="all" class="tab-pane active">        
        <table id="agent_search" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
            <thead>
                <th>Agent ID</th>
                <th>Agent Name</th>
                <th>ID Number</th>
                <th>Mobile Number</th>
                <th>Team Name</th>
                <th>Status</th>
                <th></th>
            </thead>
        </table>
    </fieldset>
    <fieldset id="dereg" class="tab-pane ">
        <table id="dereg_agent_search" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
            <thead>
                <th>Agent ID</th>
                <th>Agent Name</th>
                <th>ID Number</th>
                <th>Mobile Number</th>
                <th>Team Name</th>
                <th>Status</th>
                <th></th>
            </thead>
        </table>
    </fieldset>
</div>

我首先在使用all的第一个标签bServerSide=true和另一个表（当我切换到另一个标签时）初始化表格，我这样做：

$('#search-tabs a').click(function(e) {
    e.preventDefault();
    $(this).tab('show');
    if (this.dataset["dtname"] == "all") {
        oTable.fnDraw();
    } else if (this.dataset["dtname"] == "dereg") {
        var data = $("form").serialize();
        $.post(
            url,  data
        ).success(function(data){
            console.log(data.aaData);
            kTable = $('#dereg_agent_search').dataTable( {
                "sScrollY": "250px",
                "data": data.aaData,

                "destroy" : true,
                "sDom": "<'row'<'col-sm-6'><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'>>S",
                "aoColumnDefs": [
                  { 
                        "bSortable": false, 
                        "aTargets": [ 6 ], 
                        "sWidth":"150px",
                        "mRender": function( data, type, full ){
                            return "<div class='btn-group'><a href="+full[6][0]+" class='btn btn-default btn-sm'>View</a><a href="+full[6][1]+" class='btn btn-default btn-sm'>Edit</a></div>"
                        }
                    },
                    { 
                        "bSortable": true, 
                        "aTargets": [ 0 ], 
                        "sWidth":"150px",
                        "mRender": function( data, type, full ){
                            if (full[5] == "DEACTIVATED"){
                                return "<a href="+full[6][0]+" class='DEACTIVATED'>"+data+"</a>"
                            } else{
                                return "<a href="+full[6][0]+">"+data+"</a>"

                            }
                        }
                    },
                    {"aTargets": [ 4 ], "sWidth":"250px" },
                    {"aTargets": [ 5 ], "bVisible":false},
                ],
                "bDeferRender": true,
                "bStateSave": true
            } );
        });
        kTable.fnDraw();
    }

});

请注意，我使用jQuery $.post请求从服务器填充表中的数据，然后使用datatables的data属性来填充表。

我希望这可以帮助别人。

如何在数据表中隐藏/显示行？

1 个答案: