Search code examples
javascriptjqueryjquery-uidatatabletabletools

jQuery datatables tabletools buttons didn't show up


Can anyone explain why TableTools (http://datatables.net/extensions/tabletools/) not show up.

I'm using the following js sources:

<script src="external/jquery/jquery.js"></script> //Version 1.10.2
<script src="jquery-ui.js"></script> //Version 1.11.2
<script src="jquery.dataTables.js"></script> // Version 1.10.4
<script src="dataTables.tableTools.js"></script> //Version 2.2.3

Thats the js for the datatable and tabletools.

$('#report-datatable').dataTable({
            "processing": true,
            "serverSide": false,
            "paging": false,
            "ajax": {
                type: 'POST',
                url: 'sources/report_table.php',
                data: {
                    miDate: minval,
                    maDate: maxval,
                    retour: sap_retour,
                    hubew: sap_hubew,
                    nolkscan: nolkscan
                }
            },
            "columns": [
                { "data": "LSAP" },
                { "data": "DatumSAP" },
                { "data": "Warenempfaenger" },
                { "data": "LSLK" },
                { "data": "DatumLK" }
            ],
            "createdRow": function (row, data, index) {
                if (data['LSLK'] == null){
                    $(row).css('background-color', 'lightcoral');
                }
            },
            "dom": 'T<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
            "TableTools": {
                "Buttons": [
                    "print",
                    {
                        "Extends":    "collection",
                        "ButtonText": "Save",
                        "Buttons":    [ "csv", "xls", "pdf" ]
                    }
                ]
            },
            "destroy": true
        });

Everything works exprect the tabletools.

Thanks!


Solution

  • Solution:

    $(document).ready(function() {
    var report1table = $('#report1-datatable').dataTable();
    function reporttable(minval,maxval,sap_retour,sap_hubew,nolkscan){
            $.ajax({
                type: 'POST',
                url: 'sources/report_table_scans.php',
                data: {
                    miDate: minval,
                    maDate: maxval,
                    retour: sap_retour,
                    hubew: sap_hubew,
                    nolkscan: nolkscan
                },
                success: function(result){
                    obj = JSON.parse(result);
                    loadDatatable(obj['data']);
                },
                error: function (result) {
                    alert('Fehler beim Laden der Daten. ' + result.responseText);
                }
            });
        };
        function loadDatatable(aaData){
            report1table.dataTable({
                "dom": 'Tti',
                "deferRender": true,
                "serverSide": false,
                "paging": false,
                "data": aaData,
                "columns": [
                    { "data": "LSAP" },
                    { "data": "DatumSAP" },
                    { "data": "Warenempfaenger" },
                    { "data": "LSLK" },
                    { "data": "DatumLK" }
                ],
                "createdRow": function (row, data, index) {
                    if (data['LSLK'] == null){
                        $(row).css('background-color', 'lightcoral');
                    }
                },
                tableTools: {
                    "aButtons": [
                        "copy",
                        "print",
                        {
                            "sExtends":    "collection",
                            "sButtonText": "Save",
                            "aButtons":    [ "csv", "xls", "pdf" ]
                        }
                    ]
                },
                "destroy": true
            });
        };