jQuery event will only run once
Question
I am using the table2excel plugin which will allow me to download a tables contents to an excel file. It works fine the first time but it only lets me download once per page load.
I have tried changing the $("#export").click(function(){ to $("#export").on('click', function(){ but this did not work. The $('#export').click is within a doc ready
// click function on page
$("#export").click(function(){
$("#table2excel").table2excel({
// exclude CSS class
exclude: ".noExl",
name: "Excel Document Name"
});
});
// external js file that gets called
//table2excel.js
;(function ( $, window, document, undefined ) {
var pluginName = "table2excel",
defaults = {
exclude: ".noExl",
name: "Table2Excel"
};
// The actual plugin constructor
function Plugin ( element, options ) {
this.element = element;
// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
this.settings = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function () {
var e = this;
e.template = "<html xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:x=\"urn:schemas-microsoft-com:office:excel\" xmlns=\"http://www.w3.org/TR/REC-html40\"><head><!--[if gte mso 9]><xml>";
e.template += "<x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions>";
e.template += "<x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>";
e.tableRows = "";
// get contents of table except for exclude
$(e.element).find("tr").not(this.settings.exclude).each(function (i,o) {
e.tableRows += "<tr>" + $(o).html() + "</tr>";
});
this.tableToExcel(this.tableRows, this.settings.name);
},
tableToExcel: function (table, name) {
var e = this;
e.uri = "data:application/vnd.ms-excel;base64,";
e.base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)));
};
e.format = function (s, c) {
return s.replace(/{(\w+)}/g, function (m, p) {
return c[p];
});
};
e.ctx = {
worksheet: name || "Worksheet",
table: table
};
window.location.href = e.uri + e.base64(e.format(e.template, e.ctx));
}
};
$.fn[ pluginName ] = function ( options ) {
this.each(function() {
if ( !$.data( this, "plugin_" + pluginName ) ) {
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
}
});
// chain jQuery functions
return this;
};
})( jQuery, window, document );
3 answers
solution1
1 ACCPTED 2015-03-02 17:51:35
It only executes once because of this code block in the jquery plugin:
$.fn[ pluginName ] = function ( options ) {
this.each(function() {
if ( !$.data( this, "plugin_" + pluginName ) ) {
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
}
});
// chain jQuery functions
return this;
};
$("#table2excel") is only initialized once and skipped subsequent times.
Made some changes to some changes to your code:
$("button").click(function(){
var $table = $('#table2excel');
$table.removeData(); //data is removed, previous when data existed was preventing initialization of table2excel
$table.table2excel({
exclude: ".noExl",
name: "Excel Document Name"
});
});
You can see it working here: http://jsfiddle.net/peterdotjs/bpLsrdy2/4/
solution2
0 2015-03-02 17:26:31
Other then
$("#export").click(function(){
$("#table2excel").table2excel({
// exclude CSS class
exclude: ".noExl",
name: "Excel Document Name"
}); });
What do you hope to happen differently if they click it the second time?
What you may be feeling is only working once, is that it has applied the changes so it has no other actions to do as the work is done if clicked again.
This is under the assumption that the script is constantly going without errors. If there were errors, how you can check is by pressing f12 in Chrome. and in the top right corner of the screen you should see if there are errors. If it is running and then during the clicking action it fails, this could be your source to finding the problem.
solution3
0 2021-06-13 04:59:20
The plaguing according to script (jquery.table2excel.js) don't let you to run it more than once so for resolve this problem first add to end of your file scrip and after page loaded add link to the script which refer to plaguing now u can write your function to call exporting to excel
<script>
$(document).ready(function(){
$("#MyplaginEXL").attr("src","/TableToExcel/jquery.table2excel.js")
});
function PrintTable()
{
$("#IdTable").table2excel({
exclude: ".noExl",
filename: "FileName",
fileext: ".xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true,
preserveColors: true
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.