Buttons + Server-Side/Ajax

daerimin

Hello,

I've noticed that the export/copy/pdf, etc. buttons do not render on DataTables where I am using serverSide:true and the ajax: {url} paramaters.

Is there a way to make this work?
Thanks!!

jLinux

I dont believe that using serverSide or ajax should actually have any impact on using the buttons.. Can we have a look at the JS code? or the page with the JS?

daerimin

Of course. I will have to redact some non-relevant information, but here's it is. The table renders correctly, everything else works, I just only see the buttons if I remove the serverSide and ajax parameters.

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,cr-1.2.0,r-1.0.7/datatables.min.css">

<script src="https://cdn.datatables.net/r/dt/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,cr-1.2.0,r-1.0.7/datatables.min.js"></script>

<div class="white" id="tablediv">
    <table id="calls" class="responsive display nowrap" width="100%">
        <thead>
            <th>[title]</th>
            <th class="desktop">[title]</th>
            <th>[title]</th>
            <th class="min-tablet-l">[title]</th>
            <th class="min-tablet">[title]</th>
            <th class="desktop">[title]</th>
            <th class="desktop">[title]</th>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<script>
    
    var calls_table;
    
    jQuery(document).ready(function() {
        jQuery.blockUI({ message: '<br>Loading <?=$count?> Calls...<br><img src="/images/ajax-loader.gif"><br><br>' });
        jQuery.fn.dataTable.ext.errMode = 'none';
        calls_table = jQuery('#calls').DataTable({
            columnDefs: [
                { "name": "title", "targets": 0 },
                { "name": "title", "targets": 1 },
                { "name": "title", "targets": 2 },
                { "name": "title", "targets": 3 },
                { "name": "title", "targets": 4 },
                { "name": "title", "targets": 5, },
                { "name": "title", "targets": 6, "orderable": false, "searchable": false }
            ],
            processing: true,
            serverSide: true,
            ajax: "/ajax?format=raw&action=calls",
            initComplete: function(settings, json) {
                jQuery.unblockUI();
            },
            error: function() {
                jQuery.unblockUI();
            },
            order: [[ 0, "desc" ]],
            buttons: true
        });
        calls_table.buttons().container().appendTo('#tablediv');
    });
</script>

jLinux

This isnt relevant to the question, but I notice for ajax, you attach params like so:

ajax: "/ajax?format=raw&action=calls"

I think this might work a little better

ajax: {
   url: '/ajax',
   data: {
      format: 'raw',
      action: 'calls'
   }
}

Just a suggestion

daerimin

Agreed. Definitely better form - I will change that. :)