過濾jQuery數據表行

Question

我正在處理此表，如果該列沒有數據，則該表需要過濾行。 我可以過濾掉整個表，但是在過濾特定列的行時遇到了麻煩。 任何幫助將非常感激。

https://jsfiddle.net/mleitao/twg0qqq2/

$(document).ready(function() {
$('#camera').click(function() {
    $("#table-ActiveRooms tr td").each(function() {
        var cell = $(this)
        if (cell.children().length == 0) {
            $(this).parent().hide();
        }
    });
});

$('#btnReset').click(function() {
    $("#table-ActiveRooms tr").each(function() {
        $(this).show();
    });
});

});

Answer 1

您得到的一些建議過於復雜。 您不需要使用.each ，也不需要if語句來檢查空值。

通過修改您的選擇更具體一點，你的代碼可以更清潔，更高效，而無需使用單獨的each或if 。

看到這里： https : //jsfiddle.net/twg0qqq2/44/

$(document).ready(function() {

    $tableRows = $("#table-ActiveRooms tr");

    $('#camera').click(function() {
         $tableRows.has("td:nth-child(2):empty").hide();
    });

    $('#monitor').click(function() {
         $tableRows.has("td:nth-child(3):empty").hide();
    });

    $('#phone').click(function() {
         $tableRows.has("td:nth-child(4):empty").hide();
    });

    $('#btnReset').click(function() {
         $tableRows.show();
    });
});

nth-child(2)代表列2。您可以假設，我們只需更改此數字即可與monitor和phone匹配。

Answer 2

您需要專門選擇與所選過濾器相對應的td才能起作用。 在代碼中，當行中的任何td為空時，您將隱藏tr 。

您可以添加一個類來標識這些td，就像這個小提琴一樣： https : //jsfiddle.net/ttk2dy3f/2/

編輯：對不起，我忘了保存小提琴，現在做

Answer 3

這將基於下拉列表進行過濾，您可以將其應用於代碼。 data [1]是要過濾的列。

 var employeeName = '';

        $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            if (data[1].indexOf(employeeName) > -1) {
                return true;
            }
            else {
                return false;
            }
        }
    );



    $(document).ready(function () {
        $('#employeeSelection').change(function (event) {
                        employeeName = $('#employeeSelection').val();

                        table.draw();
                    });

var table = $('#mainGrid').DataTable({
                paging: false,
                ordering: true,
                aaSorting: [],
                scrollX: true,
                searching: true,
                dom: 'Bfrtip',
                buttons: [
                    'print'
                ]
            });

         });