Tabletools, button disabled when data loaded with Ajax
Tabletools, button disabled when data loaded with Ajax
Hi,
I am trying since days to make it work, but I really cannot.
I have implemented the dataTable in a way that it is dynamically loaded and shown through Ajax. Everything works fine, but then I tried to add tableTools, to add exporting features. No luck at all. I know it might be the swf path, but I tried all the possible combinations, nothing could make it work.
Here is how I implemented it. (all the paths have been tested and confirmed. the index.html sample page - exactly same paths - works fine)
[code]
@import "/MyWebSite/css/style.css";
@import "/MyWebSite/jq/datatables/css/demo_table.css";
@import "/MyWebSite/jq/datatables/themes/ui.1.7.2.custom.css";
@import "jq/dataTables/extras/tabletools/media/css/TableTools.css";
@import "/MyWebSite/jq/ui/css/smoothness/jquery-ui-1.8.18.custom.css";
var oTable;
var oldHTML;
$(document).ready(function () {
$('#txtStartDate').datepicker({ dateFormat: 'yy-mm-dd', showOn: 'focus' });
$('#txtEndDate').datepicker({ dateFormat: 'yy-mm-dd', showOn: 'focus' });
$.ajax({
dataType: 'html',
cache: false,
url: '/MyWebSite/proc/getLiveData.aspx',
data: ({ q: "G" }),
success: function (html) {
$("#cbo1").html(html);
$("#cbo1").combobox();
}
});
$.ajax({
dataType: 'html',
cache: false,
url: '/MyWebSite/proc/getLiveData.aspx',
data: ({ q: "F", def: '' }),
success: function (html) {
$("#cbo2").html(html);
$("#cbo2").combobox();
}
});
$.ajax({
dataType: 'html',
cache: false,
url: '/MyWebSite/proc/getLiveData.aspx',
data: ({ q: "C" }),
success: function (html) {
$("#cbo3").html(html);
$("#cbo3").combobox();
}
});
$('#btnSubmit').ajaxStart(function () {
oldHTML = $(this).html();
$(".tableContainer").fadeOut();
$(this).html('');
}).ajaxStop(function () {
$(this).html(oldHTML);
});
// Refresh the table.
$('#btnSubmit').click(function () {
if (oTable == undefined) {
oTable = $('#dataT').dataTable(
{
// "sDom": '<"top"T<"clear">ip<"clear">>rt<"bottom"ip<"clear">>',
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "jq/dataTables/extras/tabletools/media/swf/copy_cvs_xls_pdf.swf"
},
"bServerSide": true,
"bAutoWidth": false,
"bFilter": false,
"bInfo": true,
"bProcessing": false,
"cache": false,
"bPaginate": true,
"iDisplayLength": 100,
"aoColumnDefs": [
{ "sClass": "Left", "aTargets": [6, 7, 8, 9] },
{ "sClass": "Center", "aTargets": [0, 1, 2, 3, 5] },
{ "sClass": "Right", "aTargets": [4, 10] },
{ "bSortable": false, "aTargets": ["_all"] }
],
"oLanguage": { "sInfoFiltered": "", "sLengthMenu": "" },
"fnServerData": function (sSource, aoData, fnCallback) {
var iDisplayStart, iDisplayLength;
for (var i = 0; i < aoData.length; i++) {
if (aoData[i].name === 'iDisplayStart') {
iDisplayStart = aoData[i].value;
}
}
$.ajax({
dataType: 'json',
cache: false,
"url": '/MyWebSite/proc/getLiveData.aspx',
"data": ({ q: "V",
startDate: $("#txtStartDate").val(),
endDate: $("#txtEndDate").val(),
val3: $("#cbo3").val(),
val1: $("#cbo1").val(),
val2: $("#cbo2").val(),
sEcho: aoData[0].value,
iDisplayStart: iDisplayStart
}),
error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown) },
"success": function (json) {
if (json.Error != '') {
alert(json.Error);
} else {
fnCallback(json);
$(".tableContainer").fadeIn();
}
$('#btnSubmit').html(oldHTML);
}
});
}
});
} else {
oTable.fnDraw();
}
});
});
[/code]
Please help,
D.
I am trying since days to make it work, but I really cannot.
I have implemented the dataTable in a way that it is dynamically loaded and shown through Ajax. Everything works fine, but then I tried to add tableTools, to add exporting features. No luck at all. I know it might be the swf path, but I tried all the possible combinations, nothing could make it work.
Here is how I implemented it. (all the paths have been tested and confirmed. the index.html sample page - exactly same paths - works fine)
[code]
@import "/MyWebSite/css/style.css";
@import "/MyWebSite/jq/datatables/css/demo_table.css";
@import "/MyWebSite/jq/datatables/themes/ui.1.7.2.custom.css";
@import "jq/dataTables/extras/tabletools/media/css/TableTools.css";
@import "/MyWebSite/jq/ui/css/smoothness/jquery-ui-1.8.18.custom.css";
var oTable;
var oldHTML;
$(document).ready(function () {
$('#txtStartDate').datepicker({ dateFormat: 'yy-mm-dd', showOn: 'focus' });
$('#txtEndDate').datepicker({ dateFormat: 'yy-mm-dd', showOn: 'focus' });
$.ajax({
dataType: 'html',
cache: false,
url: '/MyWebSite/proc/getLiveData.aspx',
data: ({ q: "G" }),
success: function (html) {
$("#cbo1").html(html);
$("#cbo1").combobox();
}
});
$.ajax({
dataType: 'html',
cache: false,
url: '/MyWebSite/proc/getLiveData.aspx',
data: ({ q: "F", def: '' }),
success: function (html) {
$("#cbo2").html(html);
$("#cbo2").combobox();
}
});
$.ajax({
dataType: 'html',
cache: false,
url: '/MyWebSite/proc/getLiveData.aspx',
data: ({ q: "C" }),
success: function (html) {
$("#cbo3").html(html);
$("#cbo3").combobox();
}
});
$('#btnSubmit').ajaxStart(function () {
oldHTML = $(this).html();
$(".tableContainer").fadeOut();
$(this).html('');
}).ajaxStop(function () {
$(this).html(oldHTML);
});
// Refresh the table.
$('#btnSubmit').click(function () {
if (oTable == undefined) {
oTable = $('#dataT').dataTable(
{
// "sDom": '<"top"T<"clear">ip<"clear">>rt<"bottom"ip<"clear">>',
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "jq/dataTables/extras/tabletools/media/swf/copy_cvs_xls_pdf.swf"
},
"bServerSide": true,
"bAutoWidth": false,
"bFilter": false,
"bInfo": true,
"bProcessing": false,
"cache": false,
"bPaginate": true,
"iDisplayLength": 100,
"aoColumnDefs": [
{ "sClass": "Left", "aTargets": [6, 7, 8, 9] },
{ "sClass": "Center", "aTargets": [0, 1, 2, 3, 5] },
{ "sClass": "Right", "aTargets": [4, 10] },
{ "bSortable": false, "aTargets": ["_all"] }
],
"oLanguage": { "sInfoFiltered": "", "sLengthMenu": "" },
"fnServerData": function (sSource, aoData, fnCallback) {
var iDisplayStart, iDisplayLength;
for (var i = 0; i < aoData.length; i++) {
if (aoData[i].name === 'iDisplayStart') {
iDisplayStart = aoData[i].value;
}
}
$.ajax({
dataType: 'json',
cache: false,
"url": '/MyWebSite/proc/getLiveData.aspx',
"data": ({ q: "V",
startDate: $("#txtStartDate").val(),
endDate: $("#txtEndDate").val(),
val3: $("#cbo3").val(),
val1: $("#cbo1").val(),
val2: $("#cbo2").val(),
sEcho: aoData[0].value,
iDisplayStart: iDisplayStart
}),
error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown) },
"success": function (json) {
if (json.Error != '') {
alert(json.Error);
} else {
fnCallback(json);
$(".tableContainer").fadeIn();
}
$('#btnSubmit').html(oldHTML);
}
});
}
});
} else {
oTable.fnDraw();
}
});
});
[/code]
Please help,
D.
This discussion has been closed.