Adding a row to jquery-datatable using slideDown()?

Question

In my view, I have two divs, one responsible for adding an entry to my database, and one responsible for showing all of my database table rows when the page loads. The div responsible for displaying the contents of my table uses the Datatables jQuery plugin, which makes my life easier as far as displaying this content goes.

Both of these divs work just fine, separately. However, I would like to integrate them together such that when I add an entry using my first div, the database is updated, and this entry is then appended to my Datatable in my second div, without reloading the entire page.

I'm aware that this process alone is easy enough using the Datatables API, simply by using the row.add() and draw() functions, this can be done, and is demonstrated here.

While this is a potential solution, I'm not completely satisfied with it, because the rest of my page utilizes jQuery's slideDown() for neat-looking animations, and I was hoping that I could apply this animation to adding another row to my Datatable. If you look at their example, it simply inserts the row, but it would look better if I could make that row slide down from the table.

Is this something that could be done without spending too much time on it? Or should I just stick with using the Datatables API and give up on trying to animate it? I've already tried using jQuery to append a new row manually, but it looks terrible because I don't think I can reload the plugin to adopt the change into the Datatable.

Could someone please point me in the right direction? Thanks!

Answer 1

I think I've solved It!

DEMO

I've observed When click on #addRow button takes place, It adds a <tr> with class .odd or .even Depending on the number of that row ie, 1,3,5... are odd 2,4,6... are even.

So I've added CSS to make smooth transitions for height of tr, setting height of td ultimately will affect the height of tr. So here is my CSS:

.odd td{
    height:0px;
    transition:all ease 1s;
    padding:5px;
}
.even td{
    height:0px;
    transition:all ease 1s;
    padding:5px;
}

Now When the click event on #addRow button occurs, We just need to animate the last tr to specific height, to achieve slideDown effect.

That row can be either .odd or .even depending on the counter variable which is incremented each time when row is added.

So that's what I Do in JQuery.

Here is My JQuery:

$(document).ready(function() {
    var t = $('#example').DataTable();
    var counter = 1;

    $('#addRow').on( 'click', function () {
        var tr=t.row;
        tr.add( [
            counter +'.1',
            counter +'.2',
            counter +'.3',
            counter +'.4',
            counter +'.5'
        ] ).draw();
        var cls= counter%2!=0 ? ".odd" : ".even"; //class of latest row added (odd or even) %2 will do it.
        $(cls).last().animate({
            "height":"50px"
        },1000); // Acheive slideDown();
        counter++; //Increment Counter Now.

    } );

    // Automatically add a first row of data
    $('#addRow').click();
});

This will serve you as a starting step.

Also Note that: slideDown() isn't supported on <tr>. Setting height manually using css to 0px also fails. So I request you to use fadeIn() instead of changing height using animate.

Hope it helps. Cheers :)!