过滤jQuery数据表行

Question

I'm working on this table that needs to filter the rows if the column has no data. I'm able to filter out the whole table but I'm having trouble filtering out the rows for a specific columns. Any help would be much appreciated.

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

Some of the suggestions you're getting are over-complicated. You don't need to use .each , nor do you need if statements to check for empty values.

By modifying your selectors to be a bit more specific, your code can be much cleaner and more efficient, without using a single each or if .

See here: 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();
    });
});

The 2 in nth-child(2) represents column 2. As you can assume, we simply change this number to match for monitor and phone .

Answer 2

You need to select specifically the td corresponding to your selected filter for it to work. In your code, you hide the tr when any of the td in the line is empty.

You can add a class to identify these td, like ih this fiddle: https://jsfiddle.net/ttk2dy3f/2/

edit: sorry i had forgotten to save the fiddle, done now

Answer 3

This will filter based on a drop down, you can apply it to your code. data[1] is the column you want to filter.

 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'
                ]
            });

         });