cannot get instance to run ajax.reload
cannot get instance to run ajax.reload
I tried putting the code in a live datatables module but it doesn't seem to be working there
http://live.datatables.net/hubolato/1/edit?html,css,js,console,output
The basics of the code is that on change of second select field it should use the ajax to get the table. That is working fine. The problem is that when you change the dropdown again i get errors when trying to call an ajax.reload()
Uncaught TypeError: Cannot read property 'ajax' of undefined
When i got this i noticed many other were using dataTable instead of DataTable but i am using the proper one...
onChange: function(value) {
if (!value.length) {
selectsubset.disable();
console.log("No val length");
} else {
if (!$.fn.DataTable.isDataTable('#example')) {
console.log("else Yes val length");
$('#example tfoot th').each(function() {
var title = $('#example thead th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="' + title + '" />');
});
var table = $('#example').DataTable({
"processing": true,
"serverSide": false,
"lengthMenu": [
[10, 15, 20, 30, -1],
[10, 15, 20, 30, "All"]
],
"pageLength": 15,
// "scrollX": true,
// "scrollY": "400px",
// dom: 'T<"clear">lfrtip'
// "pagingType": "full_numbers",
"ajax": {
url: "ajax/get_subset.php",
type: "POST",
data: {
subsetid: value,
subsetname: this['options'][value]["value"]
}
}, // close ajax
"columnDefs": [{
// "targets": "_all",
"targets": [2, 3, 4, 5],
"createdCell": function(td, cellData, rowData, row, col) {
var $title = "";
$addresses = $(td).text().split("|");
for (i = 0; i < $addresses.length; i++) {
$title += $addresses[i] + "<br><br>";
}
$(td).attr('data-html', "true");
$(td).attr('data-toggle', "popover");
$(td).attr("data-container", "body");
$(td).attr('data-content', $title);
$(td).attr('data-trigger', "hover");
$(td).attr('data-placement', "top");
}
}], // end col defs
columns: [{
data: 'uccid',
"width": "100px"
},
{
data: 'datefiled',
"width": "80px"
},
{
data: 'Debtor Name',
"width": "150px"
}, {
data: 'Debtor Address',
"width": "150px"
}, {
data: 'Secured Name',
"width": "150px"
}, {
data: 'Secured Address',
"width": "150px"
}, {
data: 'docnum',
"width": "80px"
},
{
data: 'state',
"width": "20px"
}, {
data: 'uccfiledate',
"width": "80px"
}
] // end columns
});
var tt = new $.fn.dataTable.TableTools(table, {
"sSwfPath": "DataTables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
"sRowSelect": 'os',
"aButtons": [{
"sExtends": "copy",
"sButtonText": "Copy",
"oSelectorOpts": {
"page": 'all',
"filter": 'applied',
"mColumns": "visible"
}
}, {
"sExtends": "xls",
"sButtonText": "Export CSV",
"oSelectorOpts": {
"page": 'all',
"filter": 'applied'
}
},
{
"sExtends": "select_all",
"sButtonText": "Select All",
fnClick: function(nButton, oConfig, oFlash) {
tt.fnSelectAll(true);
}
},
"select_none"
]
});
$(tt.fnContainer()).insertBefore('div.dataTables_wrapper');
// Apply Select Columns to Display
var colvis = new $.fn.dataTable.ColVis(table);
$(colvis.button()).insertBefore('div.dataTables_wrapper');
// Apply the search by Columns
table.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
that
.search(this.value)
.draw();
tt.fnSelectNone();
});
});
} else {
var tableinstance = TableTools.fnGetInstance('example');
console.log(tableinstance);
table.ajax.reload();
}
}
}
});
Answers
I wanted to point out that the in the following code when I tried getting the instance and reloading the table. ive tried both table.ajax.reload(); and tableinstance.ajax.reload(); No dice...
I am including debug data... http://debug.datatables.net/uhixob
I figured this out... since i created this DataTables instance inside another event it was only available in that scope. I created a global variable table and i could then get to the instance from anywhere.