CODEWITHSUNDEEP
javascriptjquery
perirose
perirose

Reputation: 64

Filter jquery datatable rows

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

});

Upvotes: 0

Views: 60

Answers (3)

Tyler Roper
Tyler Roper

Reputation: 21672

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.

Upvotes: 2

jon.r
jon.r

Reputation: 1058

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

         });

Upvotes: -1

Kaddath
Kaddath

Reputation: 6151

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

Upvotes: 1

Related Questions