ColumnFilterWidgets with Datatables Buttons

jlubinda

I have successfully gotten ColumnFilterWidgets working :

$('#datatables').DataTable({
    responsive: true,
    "sDom": 'W<"clear">lfrtip',
    buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
    searching: true,
    language: {search: "_INPUT_", searchPlaceholder: "Search records",},
    "ajax": {
        "url": urlx,
        "type": "POST",
        "data": {province:province, district:district, zone:zone, school:school}
    },
    deferRender: true,
    scrollY: 200,
    scrollCollapse: true,
    scroller: true,
    initComplete: function () {
        this.api().row( 1000 ).scrollTo();
    },
    "oColumnFilterWidgets": {
        "aiExclude": [ 0,1,2,4,6,10,11,12,13,14,15 ]
    }
});

But each time I initialize it, my Datatables buttons (CSV, Excel, PDF) disappear. When i get the buttons working, the wiltering stops working:

$('#datatables').DataTable({
    responsive: true,
    dom: 'Bfrtip',
    buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
    searching: true,
    language: {search: "_INPUT_", searchPlaceholder: "Search records",},
    "ajax": {
        "url": urlx,
        "type": "POST",
        "data": {province:province, district:district, zone:zone, school:school}
    },
    deferRender: true,
    scrollY: 200,
    scrollCollapse: true,
    scroller: true,
    initComplete: function () {
        this.api().row( 1000 ).scrollTo();
    },
    "oColumnFilterWidgets": {
        "aiExclude": [ 0,1,2,4,6,10,11,12,13,14,15 ]
    }
});

I need both the filtering of ColumnFilterWidgets and the Datatables Buttons on my application. Anyone know how to do this?

colin

Hi @jlubinda ,

ColumnFilterWidgets is legacy, so isn't supported in the most recent versions of DataTables. It would be worth checking your versions. If no joy, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

jlubinda

Thanks Colin. I hav actually finally gotten it working by setting dom to 'W<"clear">Blfrtip' as follows:
$('#datatables').DataTable({
responsive: true,
dom: 'W<"clear">Blfrtip',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
searching: true,
language: {search: "INPUT", searchPlaceholder: "Search records",},
"ajax": {
"url": urlx,
"type": "POST",
"data": {province:province, district:district, zone:zone, school:school}
},
deferRender: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
initComplete: function () {
this.api().row( 1000 ).scrollTo();
},
"oColumnFilterWidgets": {
"aiExclude": [ 0,1,2,4,6,10,11,12,13,14,15 ]
}
});

Pats2kDynasty

@Colin,

I realize ColumnFilterWidgets is legacy, but is there a current feature that allows cascading filters? For example if the user selects "Birds" under an Animal column drop down to filter the list, the 2nd column drop down, "Type" now contains only a list of birds.

kthorngren

Allan provided this example in another thread:
http://live.datatables.net/gejojiqu/1/edit

Hope its what you are looking for.

Kevin