Get datatable by element id

Get datatable by element id

frenzyfrenzy Posts: 21Questions: 0Answers: 0
edited April 2011 in General
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!

Replies

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    [code]
    //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
  • RizziRizzi Posts: 12Questions: 0Answers: 0
    this doesn't work for me :(

    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
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Are you using DataTables 1.7? This was a new feature in 1.7. With 1.6 and before it would just reinitialise the table as you describe.

    Allan
  • RizziRizzi Posts: 12Questions: 0Answers: 0
    Hi,

    i use 1.7.6
  • RizziRizzi Posts: 12Questions: 0Answers: 0
    The button inside the rows is for deleting the row server-side
    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
  • RizziRizzi Posts: 12Questions: 0Answers: 0
    http://img833.imageshack.us/i/bildschirmfoto20110418uc.png/

    this is the table object at the point before trying to refresh

    console.log($(event.currentTarget.offsetParent));
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Why you say: "to redraw the table the table get new initialize :/" - I'm not sure I understand what you mean. fnDraw will simply redraw the table as it currently is. Or are you using server-side processing or something? Can you link us to your example please? I'm not really sure what is happening at the moment.

    Allan
  • RizziRizzi Posts: 12Questions: 0Answers: 0
    hi,

    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
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Thanks for that - so the call to fnDraw works, but the call to fnUpdate doesn't? fnUpdate needs parameters btw - it is used for updating a single row or cell, not the whole table. fnDraw will do that for you with server-side processing.

    What happens if you just use:

    [code]
    $("#customercompany").dataTable().fnDraw();
    [/code]
    Allan
  • RizziRizzi Posts: 12Questions: 0Answers: 0
    Hi,

    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
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    lol - so it goes... :-) Good to hear that it is working now.

    Allan
This discussion has been closed.