Open PDF in a new tab with jQuery Datatables

Question

I'm trying to open in a new tab the PDF that it is in a collection button of jQuery Datatables but it doesn't work. Instead it shows me an alert message like this:

This is my jQuery configuration:

$("#clientes").DataTable({
    dom: 'T<"clear">lfrtip',
    tableTools: {
        "aButtons": [
            {
                "sExtends": "collection",
                "sButtonText": "Generar Listado <span class='caret' />",
                "aButtons": ['csv', 'xls', {
                    extend: 'pdfHtml5',
                    download: 'open'
                }]
            }
        ],
        "sSwfPath": "Content/DataTables/swf/copy_csv_xls_pdf.swf"
       }
    });

Any ideas of how I can resolve this issue with this collection button of jquery datatables?

I have put all the references inside my bundle class to tried to make it work:

score 0 · Answer 1 · answered Aug 30 '17 at 02:30

The problem seems come from "sSwfPath" value provided incorrectly, so that the button type becomes undefined:

"sSwfPath": "Content/DataTables/swf/copy_csv_xls_pdf.swf"

The button check condition applies inside _fnButtonDefinations in dataTables.tableTools.js:

if (typeof TableTools.BUTTONS[ buttonSet[i] ] == 'undefined' )  { 
    alert( "TableTools: Warning - unknown button type: "+buttonSet[i]);
    continue;
}
buttonDef = $.extend({}, TableTools.BUTTONS[buttonSet[i]], true);

You can try UrlHelper.Content with relative path to SWF file or referring directly from DataTables CDN external resource:

// local content (in Razor view)
"sSwfPath": "@Url.Content("~/Content/DataTables/swf/copy_csv_xls_pdf.swf")"

// external resource (i.e. DataTables CDN)
"sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"

Also you can trying to set sExtends to pdf instead of collection:

$("#clientes").DataTable({
    dom: 'T<"clear">lfrtip',
    tableTools: {
        "aButtons": [
            {
                "sExtends": "pdf",
                "sButtonText": "Generar Listado <span class='caret' />",
                "aButtons": ['csv', 'xls', {
                    extend: 'pdfHtml5',
                    download: 'open'
                }]
            }
        ],
        "sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"
    }
});

Example: JSFiddle Demo

The next issue you need to watch is file security issue due to some restrictions imposed against loading external SWF resource. Open global security settings panel and select "Always allow" for CDN resource, or for locally stored SWF use "Add locations" (see image below), enter SWF path assigned to sSwfPath then confirm to apply trust for that path (may require refreshing the view afterwards).