count number of searched rows after dropdown menu changes

chris.cavage

With the help of this forum, I was able to add a select box to the header of each of my datatable's columns. The dropdown menu populates on fnInitComplete. My final task is to search how many 'Accessories' there are per change to the dropdown menu at the top.

The first column is called 'Category', and it has various categories per row like: Accessory, Remote, or Service

If the user selects a dropdown menu item from one of the other columns to filter, I want to count how many times the word "Accessory" are in the first column throughout the filtered results!

I am thinking I need to put a function in the .on(change), and here I thought I'd get able to do a search and get the page info length, but it doesn't work at all. I just keep getting a value of 10 no matter what dropdown menu items I select across my table. I don't really know where 10 even comes from, but it isn't correct. I am trying to console.log the number so I can see when it's correct.

     //add select dropdown search buttons to footer
    this.api().columns().every(function () {
        var column = this;
        var select = $('<select class="form-control"><option value=""></option></select>')
            .appendTo($(column.header()))
            .on('change', function () {

                var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                );

                column
                    .search(val ? '^' + val + '$' : '', true, false)
                    .draw();

                //HERE'S WHERE I'M THINKING I NEED TO ADD A FUNCTION TO COUNT THE FIRST COLUMN BASED ON HOW MANY ROWS THERE ARE FOR 'ACCESSORY', FOR INSTANCE; DOESN'T COUNT THE CORRECT NUMBER

                var count_acc = dt.columns(0).search('Accessory').page.info().length;
                console.log(count_acc);    


            });

        column.data().unique().sort().each(function (d, j) {


            select.append('<option value="' + d + '">' + d + '</option>')
        });
    });

kthorngren

You will want to use the filter() API for this. Sounds like you can use column() as shown in the example. In addition you will want to use a selector-modifier of {search:'applied'} as the column parameter. You should be able to use count() to get the number of rows.

Something like this:

var filteredData = table
    .column( 0, {search:'applied'} )
    .data()
    .filter( function ( value, index ) {
        return value === 'Accessory' ? true : false;
    } )
    .count();

Kevin

chris.cavage

That's it! I had that written up once, but I never had the .count() to finish it! Thanks!!