Filtering with buttons for elements

Filtering with buttons for elements

mbaasmbaas Posts: 67Questions: 24Answers: 1

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)

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,538Questions: 1Answers: 10,476 Site admin
    Answer ✓

    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

  • mbaasmbaas Posts: 67Questions: 24Answers: 1

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

  • pravindiapravindia Posts: 7Questions: 1Answers: 0

    What is value of ref_table?

  • allanallan Posts: 63,538Questions: 1Answers: 10,476 Site admin

    Its an API instance - e.g.:

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

    Allan

This discussion has been closed.