Update select filters

gwundrig

Hello everybody

I've got a tablepress table on a wordpress page which I sort and filter with API 1.10, individual column searching (select inputs). Here's the page: http://bit.ly/1DY3KTi

Now I'm trying to get the select filters updated when I filter with another filter so they show only what's in their column.
Look at the example here. If you pick "Accountant" in the second column "Position", I still see all "Office" places in the third column. The goal would be to only see "Tokyo" in this example.

Is it possible to do this with DataTables and does anybody have a idea how or a hint in the right direction?

The code from my page, if it helps:

    $.fn.dataTable.moment( 'dd.mm.yyyy' );
    $('#tablepress-3').dataTable( {
        "order": [[ 7, "desc" ]],
        "info": true,
        "paging": true,
        "language": {
            "lengthMenu": "_MENU_ Einträge pro Seite",
            "zeroRecords": "Keine Einträge gefunden",
            "info": "Seite _PAGE_ von _PAGES_",
            "infoEmpty": "Keine Einträge gefunden",
            "infoFiltered": "(gefiltert von _MAX_ Einträgen)",
            "search": "",
            "paginate": {
                "first": "Erste Seite",
                "last": "Letzte Seite",
                "next": "Nächster Eintrag",
                "previous": "Vorheriger Eintrag"
            }
        },
        "columnDefs": [
            { "orderable": false, "targets": [ 0, 1, 2, 3, 4, 5, 6, 7] }
        ],
        "pagingType": "simple_numbers",
        //"orderCellsTop": true,
        "ordering":true,
        initComplete: function () {
            var api = this.api();
            api.columns().indexes().flatten().each( function ( i ) {
            if (i==0 || i==1 || i==2 || i==3 || i==5){
                var column = api.column( i );
                var select = $('<select><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();
                    } );
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
                }
            } );
        },
    } );

allan

Hi,

Thanks for your question - I've put a little demo together to show how updating of the select inputs might be performed.

The key thing here is to make use of the selector-options parameter of the column() method. So: table.column( { search: "applied" } ).data() will get the data from the filtered rows only. Then we can apply the options in exactly the same way as in the constructor. I've got it rebuilding the filters on draw, but equally you could have a function call at the end of the change event.

There are a few "quirks" about performing the filtering this way, and how to resolve them will depend a little bit on exactly how you want to present these controls. For example, I've got it so that if the value of the input is not an empty string, its options would be rebuilt, so they can be changed.

However, you might want it so that the filter are all rebuilt based on the most recent column that was filtered. I'm sure there are other options as well!

Regards,
Allan

shocklo

OMG, been looking for this for hours, cant believe how simple it was, i just wanted to thank you allan, such a good work dude....