Having issues with TableExport.js exporting Bootstrap HTML tables

I've been trying to use the TableExport.js plugin found at to add Bootstrap HTML table export functionality to my website.

I meticulously followed all the steps to include jquery FileSaver, tableExport javascripts, and css.

<!-- jQuery -->
<script src="../vendor/TableExport/js/jquery-3.3.1.js"></script>
<!-- TableExport JavaScript -->
<script src="../vendor/TableExport/js/tableexport.js"></script>
<script src="../vendor/TableExport/js/tableexport.min.js"></script>
<script src="../vendor/FileSaver.js/FileSaver.js"></script>
    <!-- Bootstrap Core JavaScript -->
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- DataTables JavaScript -->
<script src="../vendor/datatables/jstest/jquery.dataTables.min.js"></script>
<script src="../vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
<script src="../vendor/datatables-responsive/dataTables.responsive.js"></script>

<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>

Below is how I am calling the tableExport function:

<caption class="btn-toolbar bottom tableexport-caption">
                    <button tableexport-id="c203fc6-xlsx" class="btn btn-default xlsx" onClick="$("#dataTables-example").tableExport();">Export to xlsx</button>
                    <button tableexport-id="759d678-xls" class="btn btn-default xls" onClick="$("#dataTables-example").tableExport();">Export to xls</button>
                    <button tableexport-id="87e8a31-csv" class="btn btn-default csv" onClick="$("#dataTables-example").tableExport();">Export to csv</button>
                    <button tableexport-id="78cbc47-txt" class="btn btn-default txt" onClick="$("#dataTables-example").tableExport();">Export to txt</button>
                    </caption>

However, when I click on any of the buttons, I encounter an error:

Uncaught SyntaxError: Unexpected end of input here at <button tableexport-id="78cbc47-txt" class="btn btn-default txt" onClick="$("#dataTables-example").tableExport();">Export to txt</button>

https://i.sstatic.net/prFva.png

Any thoughts on where I might be making a mistake?

Thank you.

Answer №1

Concern with the usage of double quotes within onClick event

<button tableexport-id="78cbc47-txt" class="btn btn-default txt" onClick="$('#dataTables-example').tableExport();">Export to txt</button>

Answer №2

After much consideration, I have decided to move on from this project as it doesn't seem to be progressing. I have found a suitable alternative at github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/… that meets my needs perfectly. Thank you for your assistance and time.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying stack traces in a request using HttpInterceptor in Angular 9

I have created an HttpInterceptor and I would like to print the stack trace of the functions involved in making the request for development purposes: import { Injectable } from '@angular/core'; import { HttpRequest, HttpHandler, HttpEvent, ...

Unusual patterns observed when employing the splice method in AngularJS for ordering

Take a look at this Plunker demo link I have encountered an issue after implementing the orderby feature (line 24) in my application. When I try to add an item without priority and then add another one with priority, followed by deleting the first item, t ...

AngularJS implemented to trigger a popup alert after a certain duration of time has elapsed since the

Can we create a popup alert that says "Error Contacting Server" when the http request does not receive any response? .controller('items_ctrl',['$scope','$http',function($scope,$http){ $scope.shop_id=localStorage.getItem(" ...

Various SVG paths make up segments

I have created an intricate SVG file containing 35 different paths resembling train tracks. My next step is to break down these paths into 16 segments, allowing another SVG path (train) to smoothly traverse along them. The ultimate goal is to grant users ...

Tips for breaking up array elements across multiple "tr" tags

In this particular example, I have a Fiddle set up with multiple tr elements displayed within an ng-repeat. My goal is to have three td elements per row. Would it be necessary to use an inner angularjs ng-repeat and split the iconDets array for this purpos ...

Steps for inserting a word into an element using jQuery

How can I use JQuery to insert English words into an element? Before: رایجترین نوع این پارامتر کلاس پایه eventArgs می باشد. After : رایجترین نوع این پارامتر کلاس پایه <bdo>eventArgs& ...

Is Firebase the Answer to Shopify's Authentication Validation?

I've been following this tutorial on building a Shopify app using Node, Nextjs, and React. Progress has been smooth so far, but I've now reached a point where I need to store some of my app data in Firestore. My current approach involves utiliz ...

An effective method for retrieving the version from package.json

I am currently in the process of developing an SDK that will soon be available on npm. One of the requirements for this SDK is to deliver its version to the client. My goal is to have this version match the one specified in the package.json file. However ...

Installing different versions of a package in npm can be done by loading multiple versions

I am in the process of setting up a web API and I want to provide support for various versions of the underlying library. In essence, I would like to access it through: where x.y.z represents the version of the library I am utilizing. Using npm for mana ...

Is there a way to create a new prettyphoto window by clicking on a link within the original prettyphoto window?

I have an HTML table that is dynamically constructed on the server side using AJAX. The table is displayed using prettyphoto, everything works fine up to this point. However, the last column of the table contains a link that should open an image using pret ...

What is the process for inserting a key value pair into a JSON object?

I am looking to enhance my JSON data by including a key-value pair in each object within the array. https://i.sstatic.net/48ptf.png My goal is to insert a key-value pair into every object in the students array. ...

Using Dropzone.js to bypass the Browse dialog when uploading files in integration tests with php-webdriver

Currently, I am implementing dropzone.js in my project. I have a specific requirement where I need to manually add a file to the queue without triggering the file browser dialog box. The dropzone has been initialized on the element with the class .imageDro ...

There seems to be an issue with connecting to the local server at https://localhost:3000/socket.io/ while using a

I am currently working on a Node.js project where I have a client.js for client-side code, and a server.js on a remote server using sockets to communicate over port 3000 In addition, Apache is running on port 80, with a ProxyPass configuration in place to ...

Looking for an easy solution in RegExp - how to locate the keys?

Similar Inquiries: Retrieving query string values using JavaScript Utilizing URL parameters in Javascript I am tasked with extracting specific keys from a series of URLs where the key is denoted by 'KEY=123'. My goal is to identify and e ...

Exploring Nested Views in a MEAN Application using UI Router

I am currently developing a MEAN application and struggling to get my ui-router functioning correctly. Within my index.html template, I have loaded all the necessary javascript and css for my application such as angular, jquery, angular-ui-x, bootstrap. I ...

Managing "unprocessed information" in a Node.js environment and transferring the information through a Node Express endpoint

Currently, I am in the process of making an API call to retrieve a file using axios: async function fetchData() { const configuration = {}; // { responseType: 'stream'}; const { response } = await axios.get(URL, configuration); c ...

Looking for assistance with a JavaScript code snippet

I have encountered an issue while iterating through receipts in the given code snippet. The objective is to fetch the receipt number for each receipt and add it to a JSON object. However, I am facing a problem where the same receipt is appearing in two sep ...

Removing an object from nested JSON based on a condition using jQuery with the help of AngularJS

I have a JSON object stored in the variable $scope.bbTreeData. I'm trying to delete any objects where the flag is set to false. While I can navigate through the nested JSON object, I'm unsure how to properly remove the object. Any suggestions? [ ...

Convert a file into an empty array when sending a post request from Angular to Laravel

I am currently working on a simple Laravel 5 post request that aims to achieve the following tasks: Save some data to a database. Store a file (image) in public storage with a name consisting of 20 random numbers followed by '.jpg'. Save a URL ...

Issue with dynamically filling a form field using ValidityState

I have been utilizing the ValidityState interface for client-side form validation, but I've encountered an issue. Whenever my form is populated programmatically, such as after making a call to a third-party API, the tooLong state always returns false, ...