ColumnFilterWidgets with Datatables Buttons

ColumnFilterWidgets with Datatables Buttons

jlubindajlubinda Posts: 2Questions: 1Answers: 0

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?

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • jlubindajlubinda Posts: 2Questions: 1Answers: 0

    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 ]
    }
    });

  • Pats2kDynastyPats2kDynasty Posts: 11Questions: 2Answers: 0

    @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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

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

    Hope its what you are looking for.

    Kevin

This discussion has been closed.