Custom filter buttons?

Custom filter buttons?

mrogersmrogers Posts: 15Questions: 4Answers: 0

I want to set up something like this:

http://newsonaut.com/datatable/

There would be four buttons at the top that would act as filters on the second column.

Anyone know how?

This question has an accepted answers - jump to answer

Answers

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    I would suggest the column().search() method. Simply attach an event handler to the links that will trigger a call to that method, with he search term you want (possibly reading from a data attribute in the link, or the link text itself if you wanted):

    $('ul').on( 'click', 'a', function () {
      table.column( 1 ).search( $(this).text() );
    } );
    

    You might want to add an id to the list so make sure no other lists are included in it in future.

    Allan

  • mrogersmrogers Posts: 15Questions: 4Answers: 0
    edited December 2014

    In case it helps someone else, here's what worked for me:

    var table = $('#example').DataTable();
    
    $('ul').on( 'click', 'a', function () {
     
    table
        .columns( 1 )
        .search(  $(this).text() )
        .draw();
    });
    
This discussion has been closed.