DataTables won't initialize when using TableTools and an external javascript file.

DustinK

I am having an issue that is making pull what little hair I have right out of my head.

I can successfully call DataTables with

$('table').DataTable();

I can also call DataTables with several options for example.

$('table').DataTable(
    {
        paging: false,
        scrollY: 400,
        stateSave: true,
        stateDuration: 0,
        scrollCollapse: true,
        responsive: false,
        dom: 'CTRlfrtip',
        colVis: {
            align: "right"
        }
    });

The problem comes when I want to set options for TableTools. For example when I use the following.

    $('table').DataTable(
    {
        paging: false,
        scrollY: 400,
        stateSave: true,
        stateDuration: 0,
        scrollCollapse: true,
        responsive: false,
        dom: 'CTRlfrtip',
        colVis: {
            align: 'right'
        },
        tableTools: {
            sSwfPath: '/swf/copy_csv_xls_pdf.swf',
            aButtons: [
                {
                    sExtends: 'csv',
                    oSelectorOpts:
                    {
                        filter: 'applied',
                        order: 'current'
                    },
                    mColumns: 'visible',
                    sButtonText: 'Download CSV'
                }
            ]
        }
    });

When I try the above, DataTables does not initialize. My table is show in plain old html as if DataTables was never called. The one exception to this is that there is an error in the browsers console window. I use Chrome. The error states, "Uncaught SyntaxError: Unexpected token ILLEGAL". It point's to the following block of code. I don't know where this code is even coming from because it's not the code I entered above. It does look like code that I used at one point in time. Is this cached somewhere?

"tableTools": {
            "sSwfPath": "/swf/copy_csv_xls_pdf.swf",
                "aButtons": [
                    {
                        "sExtends": "copy",
                        "oSelectorOpts": { filter: "applied", order: "current", page: "all" },
                        "mColumns": "visible"
                    },
                    {
                        "sExtends": "xls",
                        "sFileName": "*.xls",
                        "oSelectorOpts": { filter: "applied", order: "current" },
                        "mColumns": "visible"
                    },
                    {
                        "sExtend

Now for the really strange part. If I put the DataTables initialization in my file instead of using an external javascript file it works. It also works.

I have also put my external javascript file out on another host https://googledrive.com/host/0B-xvQPFXx6veZzVCeE42ZzI4ZWs and loaded my file from here. This works fine. It's only when using the file on my local development box that it's not working. Is this a web server issue?

I am sorry but I am unable to post a link as this site is only running on my local development box at the moment. Also as noted everything is working when using jsFiddle and when hosting the files externally.

johndegey

Hello,

If you think that this is a code you used before, you can add a sequential number like this to be sure that it use your last file

<script type="text/javascript" src="/js/myfile.js?125475213">

Changing it to
<script type="text/javascript" src="/js/myfile.js?125475214"> will force a new reload of the file

John

DustinK

While this is not a problem with DataTables at all I would like to post the solution so that if anyone else has this issue they will know how to fix it.

johndegey's post above put me on the right track.

This turned out to be a problem with the following conditions.

My development server is running locally on Mac inside of a VirtualBox VM that is running CentOS. My html, php, javascript, etc. are all located on my Mac's file system and do not reside inside of the VM filesystem. I use a VirtualBox shared folder which mounts the web root on my mac to the VM. I am using the Apache web server and by default, sendfile was enabled.

The short answer here is to turn off sendfile with the following command in the Apache configuration file.

EnableSendfile Off

For more information please see the following links.

http://quyennt.com/web-development/chrome-js-syntaxerror-unexpected-token-illegal-caused-by-vagrant-synced-folder/

http://stackoverflow.com/questions/9479117/vagrant-virtualbox-apache2-strange-cache-behaviour

https://forums.virtualbox.org/viewtopic.php?f=3&t=1940&p=6680&hilit=shared+folder+apache
http://httpd.apache.org/docs/2.0/mod/core.html#enablesendfile

allan

Interesting - thanks for posting back with your findings!

Allan