Custom Button/Triggers

[JamoCA]

I use TableSorter http://mottie.github.io/tablesorter/ and a couple of other libraries (buttons, FontAwesome, contextMenu), but not BootStrap. I'd prefer to use pre-existing UI to add triggers anywahre; in a sub-menu, right-click context menu, etc. The current plugin adds button-styled AHREF links to potentially pre-existing table captions and doesn't look good.

I can add CSS to hide AHREFs in the table caption and then used jQuery to trigger/click the invisible links, but the only trigger that functions is XLSX. Other links require using location.href.

/* This method won't work well if there are multiple TableExport plugins being used on a page. It's only a basic example. */
<script type="text/javascript">
$(function(){
    $('#exportBtns').on('click', 'a', function(e){
        var hiddenBtn = $('a.button-default.'+ $(this).data('click')).first();
        e.preventDefault();
        if (hiddenBtn.attr('href') == '#'){
            hiddenBtn.trigger('click');
        } else {
            location.href = hiddenBtn.attr('href');
        }
    });
});
</script>

<style type="text/css">
a.button-default {display:none !important;} /* hide TableExport caption buttons */
</style>

<span id="exportBtns" class="button-dropdown" data-buttons="dropdown">
    <button class="button">Export</button>
    <ul class="button-dropdown-list">
        <li><a href="#" data-click="xlsx">XLSX</a></li>
        <li><a href="#" data-click="xlx">XLS</a></li>
        <li><a href="#" data-click="csv">CSV</a></li>
        <li><a href="#" data-click="txt">TXT</a></li>
    </ul>
</span>

What's the best way to do this without modifying the plugin?

Have you considered making it so that the triggers can be specified? Or add methods to initiate the downloads?

[clarketm]

JamoCA,

Please check out my latest v3.2.0 release.

I supplanted the <a> tags with <button> tags and trimmed the stylesheet so that default button styles will be rendered by the browser. This is useful in situations where Bootstrap or another CSS framework is not managing your UI.

I also "normalized" the export creation process among file types to match that of the xlsx file type (using a data attribute and FileSaver.js saveAs() method). This approach also had the positive side-effect of disseminating support to IE and Safari users.

Give it a test drive and let me know if there are any other features that would provide utility!