JQuery DataTable row show/hide using Ajax Source not working

Question

3.67/5 (2 votes)

See more:

Hi all,

Please help. I have done lot of research and can't get the solution. Trying to duplicate this example using Ajax source..

http://datatables.net/examples/api/row_details.html[^]

Here is my code:

XML

<body id="dt_example">
<div id="container">                    <!-- Begin #Container -->

<div class="full_width big">List of Events</div>
<div id="demo">
<h3>Employees</h3>
<table id="the_table" class="display" cellpadding="0" cellspacing="0" border="0">
<thead>
    <tr>
        <th></th>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Telephone</th>
    </tr>
</thead>
<tbody>
</tbody>
</table>
<br />
            </div>
        </div>                                  <!-- End demo-->
</body>

C#

var oTable;
function fnFormatDetails ( nTr )
{
    var aData = oTable.fnGetData( nTr );
    var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
    sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[3]+'</td></tr>';
    sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
    sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
    sOut += '</table>';

    return sOut;
}
$(document).ready(function() {

                oTable = $('#the_table').dataTable( {
                    "bProcessing" : true,
                    "sAjaxSource" : "getEmpListJSON.json",  // ajax to take the data
                    "aoColumns" : [ {
                                "bSortable": false
                                },{
                                "mData" : "id"
                                },{
                                "mData" : "firstname"
                                }, {
                                "mData" : "lastname"
                                }, {
                                "mData" : "email"
                                }, {
                                "mData" : "telephone"
                            } ],
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "aaSorting": [[1, 'asc']],
                  // "fnInitComplete": fnOpenClose
                });

                $('#example tbody td img').on( 'click', function () {
                    var nTr = $(this).parents('tr')[0];
                    if ( oTable.fnIsOpen(nTr) )
                    {
                        /* This row is already open - close it */
                        this.src = "resources/images/showhide_images/details_open.png";
                        oTable.fnClose( nTr );
                    }
                    else
                    {
                        /* Open this row */
                        this.src = "resources/images/showhide_images/details_close.png";
                        oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
                    }
                } );

            } );

I cannot get the row show/hide working. Any suggestions.

Thank you.

Posted 13-Sep-13 8:16am

Member 10162408

Add a Solution

Comments

Jameel VM 13-Sep-13 14:30pm

did you got any script error in console?

ZurdoDev 13-Sep-13 15:11pm

Debug the code and see what is happening.

2 solutions

Solution 1

May be your problem is 'on' method.Instead of that use 'live'.If your jQuery is older than 1.7 then 'on' method is not working.So try with 'live' method.

C#

$('#example tbody td img').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' );
        }
    } );

I hope this will help to you.

Posted 13-Sep-13 20:48pm

Sampath Lokuge

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 10162408 · Accepted Answer · 2013-09-16T06:03:00

Solution 2

Thank you Sampath. You were right with use of 'live'. I found the solution here. The link below solved my problem. Hope this will help others with the similar issue.

http://datatables.net/blog/Drill-down_rows[^]

Posted 16-Sep-13 6:03am

Member 10162408

Updated 16-Sep-13 6:04am

v2

JQuery DataTable row show/hide using Ajax Source not working

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

JQuery DataTable row show/hide using Ajax Source not working

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us