Using a call-back function within datatables buttons extension

Question

I'm using jQuery Datatables buttons extension.

       "buttons": [
            {
                extend: 'colvis', //column visibility
                className: 'data_export_buttons'
            },
            {
                extend: 'print',
                className: 'data_export_buttons',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'excel',
                className: 'data_export_buttons',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'csv',
                className: 'data_export_buttons',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdf',
                className: 'data_export_buttons',
                exportOptions: {
                    columns: ':visible'
                }
            }
        ]

Everything works, however, I would like to use the above code as a call-back function. So instead of repeating the same lines across all my tables (I have over 15), I would just call the function like this:

   var table = $('#table').DataTable({ 
        "paging": true,
        "info": false,
        "ordering": true,
        "columnDefs": [
            { "targets": [0], "orderable": false}
        ],
        export_data() // the call-back function for colvis and export button extensions
    });

I have tried this but it didn't work. My table lost data. Is there a way to achieve this?

colin0117 · Accepted Answer · 2018-04-15 10:42:45Z

1

Yep, you can't do a callback there, but a just as tidy way would be to create a variable, something like

myButtons = [
        {
            extend: 'colvis', //column visibility
            className: 'data_export_buttons'
        },
        // snip
    ];

Then, when you create your tables:

   var table = $('#table').DataTable({ 
    "paging": true,
    "info": false,
    "ordering": true,
    "columnDefs": [
        { "targets": [0], "orderable": false}
    ],
    "buttons": myButtons
});

answered Apr 15, 2018 at 10:42

colin0117

1,5581 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Valkay Over a year ago

I'm afraid that didn't work. Tried that and my table lost data

colin0117 Over a year ago

I don't understand that, sorry, you shouldn't lose data. Take a look at these two examples - this has the buttons declared in the iniitialisation (live.datatables.net/zafakupu/1/edit), and this, within a variable (live.datatables.net/xelavora/1/edit). All it's doing is using a variable to avoid repetition.

Valkay Over a year ago

Hi colin117, I was able to get it to work by removing the double quotes around the DataTable parameters. So instead of "buttons", I have buttons, taking cue from the links you shared. I don't understand the reason for that behavior but it works, and that works for me. Thanks for your answer and the links.

Collectives™ on Stack Overflow

Using a call-back function within datatables buttons extension

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related