Filtering with buttons for elements

mbaas

I would like to add filtering to my datatable...with a nice UI, compareable with https://www.datatables.net/reference/option/ - but I'm temporarily blinded or stupid and did not seem to find the right approach for that. Are there any demos floating around somewhere which would illustrate that or could someone pls. give a few hints? (If it helps, I'm also using yadcf)

allan

This is the code that I use for that page:

        var search = $(
            '<div class="ref_field">'+
                '<div class="ref_label">Group:</div>'+
                '<div class="ref_input"></div>'+
            '</div>'
        ).appendTo( 'div.ref_search' );

        ref_table.column(0).data().unique().each( function (item, i) {
            var input = search.find('div.ref_input');

            input.append(
                $('<a class="site-btn btn-inline small">'+item+'</a>')
                    .on( 'click', function () {
                        $(this).toggleClass('active');
                        
                        var items = input.find('.active').map( function () {
                            return $(this).text();
                        } ).toArray().join('|');

                        ref_table.column(0).search( items, true, false ).draw();
                    } )
            );
        } );

The key is that you need to build a search term for the column().search() call.

Allan

mbaas

Cool - thanks very much. I think I may actually be able to get something going with that! ;-)

pravindia

What is value of ref_table?

allan

Its an API instance - e.g.:

var ref_table = $('#myTable').DataTable();

Allan