Quantcast
Channel: DataTables 1.10 — DataTables forums
Viewing all articles
Browse latest Browse all 2366

Update select filters

$
0
0

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>' )
                } );
                }
            } );
        },
    } );

Viewing all articles
Browse latest Browse all 2366

Trending Articles