CODEWITHSUNDEEP
jquerydatatables
Dino
Dino

Reputation: 1457

Datatables Jquery expand / collapse and animation

I am using datatables plugin and currently the code I have expands / collapse when an image in the td is clicked but I would like to be able to click the row to expand please can anyone help with this? Here is the code:

            $(document).ready(function() {
            /*
             * Insert a 'details' column to the table
             */
            var nCloneTh = document.createElement( 'th' );
            var nCloneTd = document.createElement( 'td' );
            nCloneTd.innerHTML = '<img src="../examples_support/details_open.png">';
            nCloneTd.className = "center";

            $('#example thead tr').each( function () {
                this.insertBefore( nCloneTh, this.childNodes[0] );
            } );

            $('#example tbody tr').each( function () {
                this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
            } );

            /*
             * Initialse DataTables, with no sorting on the 'details' column
             */
            var oTable = $('#example').dataTable( {
                "aoColumnDefs": [
                    { "bSortable": false, "aTargets": [ 0 ] }
                ],
                "aaSorting": [[1, 'asc']]
            });

            /* Add event listener for opening and closing details
             * Note that the indicator for showing which row is open is not controlled by DataTables,
             * rather it is done here
             */
            $('#example tbody td').live('click', function () {
                var nTr = this.parentNode.parentNode;
                if ( this.src.match('details_close') )
                {
                    /* This row is already open - close it */
                    this.src = "../examples_support/details_open.png";
                    oTable.fnClose( nTr );
                }
                else
                {
                    /* Open this row */
                    this.src = "../examples_support/details_close.png";
                    oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
                }
            } );
        } );

Secondly I would like the expand and collapse to be a smooth animation could someone advise me how to do that?

Thanks

Upvotes: 1

Views: 8143

Answers (4)

Bill Lock
Bill Lock

Reputation: 61

//capture clicks on Details image of table to open details $('#tblPolingLog tbody').on('click', ".btn.glyphicon", function () {

var nTr = this.parentNode.parentNode;
var aPos = oTable.fnGetPosition(this.parentNode.parentNode);
// cRound = $('#tblPolingLog').dataTable().fnGetData(aPos);
cRound = $('#tblPolingLog').dataTable().fnGetData(this);
if ($(this).hasClass("glyphicon-eye-close")) {
    // This row is already open - close it
    $(this).removeClass("glyphicon-eye-close").addClass("glyphicon-eye-open");
    $(this).attr('title', 'Open record');
    oTable.fnClose(nTr);
}
else if ($(this).hasClass("glyphicon-eye-open")) {
    //Open this row         
    DisplayLoadingMessage('on');
    $(this).removeClass("glyphicon-eye-open").addClass("glyphicon-eye-close");
    $(this).attr('title', 'Close record');
    var ID = $(this).attr("rel");
    //get partial Page
    $.get("Poling/GetPolingLogByIDDetailsPartial", function (htmldata) {
       oTable.fnOpen(nTr, htmldata, 'details' + ID);   
                    //populate details

    });
    $.getJSON("/api/PolingAPI/GetPolingLogByID?ID=" + ID, function (result) {
        DisplayLoadingMessage('off');
        SetDetailsView(result, "courseDetails", ID, nTr, aPos);


    });
}

});

Upvotes: 0

nikolai.serdiuk
nikolai.serdiuk

Reputation: 762

My solution:

JS

$(document).ready(function () {
......
$('.datatable-header-footer').on('draw.dt', function () {
                bindRowToggle();
            });

            $('.datatable-header-footer').on('processing.dt', function () {
                bindRowToggle();
            });

            $('.datatable-header-footer').on('search.dt', function () {
                bindRowToggle();
            });

            bindRowToggle();
        });

        function bindRowToggle() {
            $('tr.parentOrder').click(function () {
                $(this).nextAll(':lt(2)').toggle();
            });
        }

CSS

.parentOrder {

}

.childOrder {
    display: none;
}

HTML

<table class="table datatable-header-footer text-nowrap">
...
<tr class="parentOrder"></tr>
<tr class="childOrder"></tr>
<tr class="childOrder"></tr>

Upvotes: 0

tparkin
tparkin

Reputation: 31

If you have a div within your new row code, you can do the following. In my new rows I have a div with a class of innerDetails. Here's what I did:

Line 5648 of jquery.dataTables.js is:

$(nNewRow).insertAfter(nTr);

Change it to:

var innerDetails = $(nNewRow).find('div.innerDetails');
innerDetails.css('display', 'none');
$(nNewRow).insertAfter(nTr);
innerDetails.slideDown();

This is the way it should work out of the box, imo.

Upvotes: 2

glortho
glortho

Reputation: 13198

For the first part of your question:

$('#example tbody tr').live('click', function () {...}

For the second part, find this.fnOpen = function( nTr, sHtml, sClass ) in jquery.dataTables.js and then find this line inside the fnOpen method: 

$(nNewRow).insertAfter(nTr);

Change it to this:

$(nNewRow).css('display','none').insertAfter(nTr).slideDown();

Or whatever your chosen animation is.

This is untested but something like it will definitely work.

Upvotes: 0

Related Questions