Delete row with fade out

jLinux

I just realized that when I delete a row from a table (which contains input fields), that its still there in the submitted data after I submit.

$attributes_table.find("[data-row-id='" + row_id + "']").fadeOut( 'slow' );

I realize im not using the DataTables remove().draw() method, (below)..
$attributes_table.row( $(this).parents('tr') ).remove().draw();

But I wanted a fade out effect, is that possible to have my cake and eat it to? :-D

Edit:
Ive tried..

// This fades out, but still is in the post
$attributes_table.find("[data-row-id='" + row_id + "']").fadeOut( 'slow' ).draw();

// These deletes it and it isnt in post, but doesnt fade out
$attributes_table.find("[data-row-id='" + row_id + "']").fadeOut( 'slow' ).remove().draw();
$attributes_table.find("[data-row-id='" + row_id + "']").remove().fadeOut( 'slow' ).draw();

jLinux

Oh, one other question, somewhat related to this..

Is it possible to use the DT API on a table thats already been initiated elsewhere?

Example..

File 1 contains:

$(document).ready(function(){
     var data_table = $('#example').DataTable();
});

File 2 contains:

$(document).ready(function(){
     $('#example tbody').on( 'click', 'img.icon-delete', function () {
    data_table
        .row( $(this).parents('tr') )
        .remove()
        .draw();
} );
});

How can I reference the same DT without re-initiating datatables on it?

allan

In short no - animating table row height is really quite difficult. To do it reliably you need to wrap the elements in the row's cells with a div and then animate those elements. Which needless to say is horrible...

Is it possible to use the DT API on a table thats already been initiated elsewhere?

You can call $('#example').DataTable(); as many times as you want. If the table doesn't exist, it will construct the table. If it does already exist, it will just return an API instance to the existing table.

Allan

jLinux

Oh awesome, thanks

jLinux

I know you said no, or that its really quite difficult, but I keep trying, not sure why, lol...

function delete_row(row_id){
    var $row = $fields_table.find('tr[data-row-id="' + row_id + '"]');

    $row.find('td').fadeOut('fast', function($row){
        $row.parents('tr:first').remove();

    });
    
    /* // Normal way - Disabled while trying to do the impossible
     $fields_dt
     .row( $fields_table.find("[data-row-id='" + row_id + "']") )
     .remove()
     .draw();
     */
}

It does the fade out bit! But doesnt delete 100%, as its still in the $_POST data :-(

I keep thinking that theres gotta be a simple way to resolve this... Like execute the code above, then somehow delete the row and its contents from the dom, via DataTables API or just some jQuery/JS. >.<