过滤jquery数据表行

时间:2017-01-12 19:18:46

标签: javascript jquery

我正在处理此表,如果列没有数据,则需要过滤行。我能够过滤掉整个表格,但是我在筛选特定列的行时遇到了问题。任何帮助将不胜感激。

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

});

3 个答案:

答案 0 :(得分:2)

您获得的一些建议过于复杂。您不需要使用.each,也不需要if语句来检查空值。

通过将选择器修改为更具体一点,您的代码可以更清晰,更高效,而无需使用单个eachif

见这里: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代表第2列。您可以假设,我们只是更改此数字以匹配monitorphone

答案 1 :(得分:1)

您需要专门选择与所选过滤器对应的td才能使其正常工作。在您的代码中,当行中的任何tr为空时隐藏td

你可以添加一个类来识别这些td,就像这个小提琴一样:https://jsfiddle.net/ttk2dy3f/2/

编辑:对不起,我忘了保存小提琴,现在就完成了

答案 2 :(得分:-1)

这将根据下拉列表进行过滤,您可以将其应用于您的代码。 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'
                ]
            });

         });