Search code examples
datatablestabletools

Cannot get Buttons csv working in DataTables 1.10.11


I am upgrading an existing site that was using DataTables 1.9.4 and TableTools 2.0.3 to use DataTables 1.10.11. I cannot get the csv button to show up on my page.

I replaced

"oTableTools": {
    "sSwfPath": "scripts/jquery/TableTools-2.0.3/media/swf/copy_csv_xls.swf",
    "sRowSelect": "multi",
    "aButtons": [
        { 
            "sExtends": "text",
            "sButtonText": t.cmdMarkSelectedInvoiced,
            "fnClick": function (nButton, oConfig, oFlash) {
                vr.markSelectedInvoiced();
            }
        },
        {
            "sExtends": "csv",
            "sButtonText": t.cmdExportSelectedToCSV,
            "bSelectedOnly": true
        },
        {
            "sExtends": "csv",
            "sButtonText": t.cmdExportAllToCSV
        },
        {
            "sExtends": "select_none",
            "sButtonText": t.cmdDeselectAll
        }
    ]
},

with

"buttons": ['csv'],

the new initialization for the datatable is:

var bla = $('#someelement').DataTable({                
    "buttons": [
        'csv'
    ],
    "pagingType": "simple",
    "destroy": true,
    "stateSave": true,
    "stateSaveCallback": function (settings, data) {
        vr.saveDtState(data);
    },
    "stateLoadCallback": function (settings) {
        return vr.dtSavedState(settings);
    },
    "pageLength": 10,                
        "language": {
            "emptyTable": t.tblInfoNoDesignRequestFound,
            "infoEmpty": t.tblInfoNoDesignRequestFound,
            "zeroRecords": t.tblInfoNoDesignRequestFound,
            "info": ct.tblInfoTxtDisplayingXtoYofTotal,
            "infoFiltered": ct.tblInfoTxtFilteredFromMax,
            "lengthMenu": ct.tblInfoTxtShow + ' <select>' + '<option selected value=10>10</option>' + '<option value=15>15</option>' + '<option value=20>20</option>' + '<option value=25>25</option>' + '<option value=-1>' + ct.txtAll + '</option>' + '</select> ' + ct.tblInfoTxtRows,
            "search": ct.tblInfoTxtFilter,
            "paginate": {
                "next": ct.tblInfoTxtNextPage,
                "previous": ct.tblInfoTxtPreviousPage
            }
        },
        "ordering": true,
        "order": [],
        "stripeClasses": [
            'myodd',
            'myeven'
        ],
        "data": vr.dataObj.data,
        "columns": [
            {
                "data": "companyLocation",
                "title": ct.chCompanyLocation
            },
            {
                "data": function (source, type, val) {
                    if (type === 'display' || type === 'filter') {
                        return u.jsonToLocalDate(source.requestStatusDateUtc, false);
                    }
                    return source.requestStatusDateUtc;
                },
                "title": ct.chDate
            },
            {
                "data": function (source, type, val) {
                    return vr.formattedNameSizeAndOrient(source, type)
                },
                "title": ct.chLogoName
            },
            {
                "data": function (source, type, val) {
                    return vr.formattedDrInfo(source, type)
                },
                "title": ct.chDRNumber
            },
            {
                "data": "requestStatusDescription",
                "title": ct.chStatus
            },
            {
                "data": "invoiceAmount",
                "title": ct.chInvoiceAmount,
                "orderable": false,
                "className": "rightJustify"
            },
            {
                "data": "invoiceCurrency",
                "bSortable": false
            },
            {
                "data": "requestedBy",
                "title": ct.chCreatedByName,
                "orderable": false
            }
        ],
        "initComplete": function () {
            vr.loadColumnSelects('viewRequestsDataTable', this, columnSelects);
        }
    });

Solution

  • You need to specify the dom: parameter.