3

I, for the life of me, can't seem to get tablesorter's download to CSV feature to work. I thought maybe it was something wrong with my setup so I created a bare-bone test table but still ran into the same issue.

According to the official documentation, I need tablesorter 2.8 or higher (I'm on 2.25.3) and jQuery 1.7 or higher (I'm pulling in jQuery 1.12.0). I followed Mottie's own simple setup from this question but I'm having no luck.

Below is my test code. I have to be missing something obvious but, after staring at it for hours, I'm not seeing it.

<head>
    <title>Table to CSV</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.4/js/jquery.tablesorter.combined.min.js"></script>
</head>
<body>
    <button class="download">Download CSV</button>
    <table class="tablesorter">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Number</th>
                <th>Food</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Billy</td>
                <td>Bob</td>
                <td>4</td>
                <td>Pizza</td>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Jackson</td>
                <td>23</td>
                <td>Tacos</td>
            </tr>
            <tr>
                <td>Robert</td>
                <td>Roy</td>
                <td>6</td>
                <td>Hamburger</td>
            </tr>
        </tbody>
    </table>

    <script>
        $( document ).ready(function(){
            var $table = $("table");

            $table.tablesorter({
                widgets: ["output"]
            });

            $('.download').click(function(){
                $table.trigger("outputTable");
                console.log("Download clicked.");
            });
        });
    </script>
</body>

EDIT: Swapped out my own [local] tabelsorter script src with cloudflare's.

Community
  • 1
  • 1
Steve
  • 129
  • 13
  • I pasted your code and ran it and in the debugger (F12) when it got to line `$table.tablesorter({` it said _object doesn't support property or method 'tablesorter'_ – Nick.Mc Feb 29 '16 at 23:11
  • Are you loading your own tablesorter? I'm loading mine locally (see the src tags) so if you didn't modify it to load your own, it won't be finding it. Thanks for the quick reply! – Steve Feb 29 '16 at 23:14
  • I see that now and I'm jsut trying to find a CDN. What do you see in your F12 console when you run it? – Nick.Mc Feb 29 '16 at 23:15
  • No errors occur. The only thing that appears on the console is the log entry I put in the script for the "click" action to verify I wasn't being stupid and misspelling something. – Steve Feb 29 '16 at 23:30
  • I used `https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.4/js/jquery.tablesorter.min.js` and reproduced your issue and I'm sorry to say I don't have any other ideas right now. Normally this stuff fails and there is an obvious error in the console but you (unlike many others before you!) have checked it. Perhaps you could alter your code to be runnable and reproducible anywhere. – Nick.Mc Feb 29 '16 at 23:32
  • No need to apologize! I'm just grateful for a second pair of eyes on this one. Maybe, just maybe, Mottie will see this and have some insight. – Steve Feb 29 '16 at 23:34
  • I'm not usually a javacsript guy but are you sure `$table` has scope at `$table.trigger`? In the sample here https://mottie.github.io/tablesorter/docs/example-widget-output.html, note that `$table` is defined inside the `.click(function`. I'm having difficulty using the debugger to work it out – Nick.Mc Feb 29 '16 at 23:49
  • I haven't used tablesorter, but is v2.25.3 a higher version than v2.8? – xCRKx TyPHooN Feb 29 '16 at 23:51
  • @Nick.McDermaid: Unfortunately, that's not the issue. When I add things such as resetting any sorting that's applied, it works just fine which follows the same pattern (on click, trigger function). As for his example, I think he's defining it in the click because there's multiple tables but I'm not 100%. – Steve Mar 01 '16 at 00:06
  • @xCRKxTyPHooN: I had that same thought! I was about to download a newer version until I realized that v2.25 is newer than v2.8. – Steve Mar 01 '16 at 00:07
  • I've been looking at this for a bit and I don't have much to offer. The button doesn't do anything for me, and it doesn't throw any errors. I did manage to get an 'undefined' alert when trying to call $('table.tablesorter').config.widgetOptions (I added some widget options first) according to some of the code I was mimicking here: https://mottie.github.io/tablesorter/docs/example-widget-output.html. That doesn't tell me much, other than the tablesorter() declaration might not be working for whatever reason. – xCRKx TyPHooN Mar 01 '16 at 00:47

1 Answers1

4

I think you're only missing the widget-output.js file:

https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.4/js/widgets/widget-output.min.js

It should be loaded using a <script> after tablesorter. Click on the "External Resources" section of this demo to see all the files you need (not including jQuery).

Mottie
  • 84,355
  • 30
  • 126
  • 241
  • ha - I added this reference and it worked for me.... so I'm interested in knowing if I could glean this missing reference from somewhere in the F12 console? – Nick.Mc Mar 01 '16 at 05:37
  • I knew it had to be something stupid on my part. Thank you so much, Mottie! When I viewed that demo, I was thinking how it would be nice to be able to see the scripts it was loading--never noticing the navigation tab on the left. Thanks agian. – Steve Mar 01 '16 at 15:25
  • @Nick.McDermaid I could add a warning in the console when the `debug` option is set. – Mottie Mar 02 '16 at 13:43
  • Done - see https://github.com/Mottie/tablesorter/commit/d74fd843e7a71c571d6824c7d8a7e56666ef838c – Mottie Mar 02 '16 at 14:13
  • Wow that's service! :) – Nick.Mc Mar 02 '16 at 22:58