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: 4,323Questions: 0Answers: 769

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

Sign In or Register to comment.