Extensions: Buttons .. hide specific category

zukii

Hey guys,

i have the following dataTable: https://jsfiddle.net/zukii/Lucq6vc5/

With the Buttons extension i hide some columns..

Is there any oppurtunity to also show only a special "Type"? For example if I click on "Privat" (top left corner) in the column "Type" only "Privat" is shown? Or if I click "Gewerbe" only "Gewerbe" is shown in the "Type"-column..?

that would be perfect.. i hope anybody can help

greetings

mackmack

You will working on row filtering and not in columns.

Just updated your https://jsfiddle.net/Lucq6vc5/21/

table = $('table.dt-kunde').DataTable({

        "order": [
        [0, "asc"]
    ],

        "aoColumnDefs": [
            {
                type: 'de_date',
                targets: 4
            },
            {
                "bSortable": false,
                "aTargets": [6]
            }
    ],

        "language": {
            "lengthMenu": "Zeige _MENU_",
            "zeroRecords": "Es konnte kein Kunde gefunden werden.</a>",
            "info": "Seite _PAGE_ von _PAGES_",
            "infoEmpty": "Es konnte kein Kunde gefunden werden.",
            "infoFiltered": "(bei _MAX_ angelegten Kunden)",
            "search": " ",
            "paginate": {
                "first": "Erste",
                "last": "Letzte",
                "next": "Vor",
                "previous": "Zurück"
            },
        },
        dom: 'Bfrtip',
    buttons: [
        {
            extend: 'colvisGroup',
            text: 'Privat ',
            show: [ 0, 1, 3, 4, 5, 6 ],
            hide: [ 2 ],
            action: function ( e, dt, node, config ) {
                $.fn.dataTable.ext.search.push(
                    function( settings, data, dataIndex ) {
                        return data[5] == 'Privat'
                    }
                ) 
                table.draw();
                $.fn.dataTable.ext.search.pop();
                }
        },
        {
            extend: 'colvisGroup',
            text: 'Gewerbe ',
            show: [ 0, 1, 2, 3, 5, 6 ],
            hide: [ 4 ],
            action: function ( e, dt, node, config ) {
                $.fn.dataTable.ext.search.push(
                    function( settings, data, dataIndex ) {
                        return data[5] == 'Gewerbe'
                    }
                ) 
                table.draw();
                $.fn.dataTable.ext.search.pop();
            }
        },
        {
            extend: 'colvisGroup',
            text: 'Alle',
            show: ':hidden',
            action: function ( e, dt, node, config ) {
            table.draw();
        }
        }
    ]

});

zukii

I did this way thx 4 your help

$('table.dt-kunde').dataTable({
    responsive: true,

    "order": [[0, "asc"]],

    "aoColumnDefs": [
        {
            type: 'de_date',
            targets: 3
        },
        {
            "bSortable": false,
            "aTargets": [5]
        },
        {
            "targets": [4],"visible": false
        } 
    ],

    "language": {
        "lengthMenu": "Zeige _MENU_",
        "zeroRecords": "Kein Kunden vorhanden!",
        "info": "Seite _PAGE_ von _PAGES_",
        "infoEmpty": "Es konnte kein Kunde gefunden werden.",
        "infoFiltered": "",
        "search": " ",
        "paginate": {
            "first": "Erste",
            "last": "Letzte",
            "next": "Vor",
            "previous": "Zurück"
        },
    },
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'colvisGroup',
            text: 'Privat', 
            action: function ( e, dt, node, config ) {
                                dt = dt.column([1,4]).visible(false);
                                dt = dt.columns([0,2,3,5]).visible(true);
                                $('#type-selector').val("Privat").trigger("change");
            }
        },
        {
            extend: 'colvisGroup',
            text: 'Gewerbe',
            action: function ( e, dt, node, config ) {
                                dt = dt.column([3,4]).visible(false);
                                dt = dt.columns([0,1,2,5]).visible(true);
                                $('#type-selector').val("Gewerbe").trigger("change");
            }
        },
        {
            extend: 'colvisGroup',
            text: 'Alle',
            action: function ( e, dt, node, config ) {
                                dt = dt.column([4]).visible(false);
                                dt = dt.columns([0,1,2,3,5]).visible(true);
                                $('#type-selector').val("").trigger("change");
            }
        }
    ],
     initComplete: function () {                     //Optionen im Footer
            this.api().columns([4]).every( function () {                            //welche Spalte soll ein Select bekommen
                var column = this;
                var select = $('<select id="type-selector" value="wählen"><option value="" selected>Alle</option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .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>' )
                } );
            } );
        }
});