Get datatable by element id
Get datatable by element id
Hi,
I was wondering, is there a way to get the datatable object by, for instance, element id (or class name or whatever). Something like this:
Somewhere in javascript code:
[code]
//initialize the datatable
('#myDatatableId').dataTable();
...
//lets get the datatable object by its id and clear it!
getDatatableById('myDatatableId').fnClearTable();
[/code]
What would the function 'getDatatableById' look like?
Thanks in advance, and thanks for the Datatables in general!
I was wondering, is there a way to get the datatable object by, for instance, element id (or class name or whatever). Something like this:
Somewhere in javascript code:
[code]
//initialize the datatable
('#myDatatableId').dataTable();
...
//lets get the datatable object by its id and clear it!
getDatatableById('myDatatableId').fnClearTable();
[/code]
What would the function 'getDatatableById' look like?
Thanks in advance, and thanks for the Datatables in general!
This discussion has been closed.
Replies
//initialize the datatable
$('#myDatatableId').dataTable();
...
//lets get the datatable object by its id and clear it!
$('#myDatatableId').dataTable().fnClearTable();
[/code]
will do it. When you don't pass any parameters to $().dataTable() it will attempt to fund any tables which have already been initialised first and then use that for the API call.
Allan
ich hab an button in each table row with a click event handler..
with event.currentTarget.offsetParent i get the table element
then trying with
[code]$(evt.currentTarget.offsetParent).dataTable().fnDraw();[/code]
to redraw the table the table get new initialize :/
any idea ?
Rizzi
Allan
i use 1.7.6
click event, open a dialog for deleting confirmation, if user confirm, a request sends to the server and on ajax success handler the table have to update.
event.currentTarget.offsetParent is the right table if i look at firebug console.log output for it
Rizzi
this is the table object at the point before trying to refresh
console.log($(event.currentTarget.offsetParent));
Allan
i use server-side processing. its an tomcat project what i locally develop on my local machine. tomorrow i trying create an equal example on an online server to illustrate my problem.
here is some code snippets:
initial the table with
[code]
aTable = $("table#customercompany").dataTable({
"oLanguage" : {......},
"aaSorting" : [
[
2, 'asc'
]
],
"aoColumns" : [
{
"sName" : "companyRecord.type.companyRecordTypeShort",
"sWidth" : "45px"
}, {
...
}, {
"sName" : "id",
"sWidth" : "16px",
"bSearchable" : false,
"bSortable" : false,
"fnRender" : function(oObj) {
return "";
},
"bUseRendered" : false
}
],
"sScrollY" : "640px",
"bAutoWidth" : false,
"sScrollX" : "1035px",
"bPaginate" : false,
"bLengthChange" : false,
"bFilter" : true,
"bSort" : true,
"bInfo" : false,
"bJQueryUI" : true,
"bProcessing" : false,
"bServerSide" : true,
"sAjaxSource" : "app/company/listAsJson",
"sDom" : 'rt',
"bScrollInfinite" : true,
"fnServerData" : function(sSource, aoData, fnCallback) {
noUnload = true;
if (xhr != null) {
xhr.abort();
}
xhr = $.ajax({
dataType : "text json",
type : "POST",
global : false,
async : true,
url : sSource,
data : aoData,
success : fnCallback,
cache : false,
error : function(xhr, error, thrown) {
if (error == "parsererror") {
alert("DataTables warning: JSON data from server could not be parsed. " + "This is caused by a JSON formatting error.");
}
}
});
}
});
[/code]
this is the live click event handler for the button rendered in the table:
[code]
$('table.display tbody button.delete').live('click', function(evt) {
evt.preventDefault();
_self = evt.currentTarget;
dataset = $(_self).metadata();
id = $(_self).val();
$(""+dataset.name+"").dialog({
title : localeStrings.dialogDeleteTitle,
modal : true,
width : 430,
height : 155,
resizable : false,
buttons : [
{
text : localeStrings.buttonOk,
click : function() {
$.ajax({
type: "GET",
global: false,
url: dataset.url,
data: dataset.data,
success: function() {
console.log($(evt.currentTarget.offsetParent));
$(evt.currentTarget.offsetParent).dataTable().fnDraw(); // HERE IS THE PROBLEM
//$(evt.currentTarget.offsetParent).dataTable().fnUpdate();
}
});
$(this).dialog('close');
return false;
}
}, {
text : localeStrings.buttonCancel,
click : function() {
$(this).dialog('close');
return false;
}
}
],
close: function() {
$(this).dialog('destroy');
$(this).remove();
}
});
});
[/code]
on "HERE IS THE PROBLEM" the datatables get new initialized in place of update data from server
greets Rizzi
What happens if you just use:
[code]
$("#customercompany").dataTable().fnDraw();
[/code]
Allan
the fnUpdate command is comment out and not used.
the fnDraw call doesn't work, yesterday!
this morning it's like magic :) booting my machine, start up my develop tools, no code changed and it works :)
javascript is a crazy think! :D
Rizzi
Allan