Child rows showing extra information on demand

srain

I have two webmethods which is DisplayMessage and GetDetail.

I do not want to get the full data of root and detailed data as it will then return more than 5000 rows.

What I want to achieve:

DisplayMessage method will populate the root table with UserName, Email, and Completed.

When click on Expand button from root table, it will pass Email var and GetDetail method will get back the needed details (Currently Email is hardcoded to 'hello@test.com')
The extra information will then display Product, Date, Status.

Currently working

Root table with UserName, Email and Completed is showing
Clicking on image to expand (+) changes image to collapse image (-)

Not working

Once expanded, clicking on collapsed image (-) is not changing to expand image (+) , as well as not returning back to collapsed state
Not displaying detailed information

I have tried to get ideas from this page but not getting it
http://datatables.net/release-datatables/examples/api/row_details.html

My code as follows :

   function format(d) {
        // `d` is the original data object for the row
        return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
            '<tr>' +
                '<td>Product Name:</td>' +
                '<td>' + d.ProductName + '</td>' +
            '</tr>' +
            '<tr>' +
                '<td>Activation Date:</td>' +
                '<td>' + d.ActivationDate + '</td>' +
            '</tr>' +
            '<tr>' +
                '<td>Expiry Date:</td>' +
                '<td>' + d.ExpiryDate + '</td>' +
            '</tr>' +
             '<tr>' +
                '<td>Status:</td>' +
                '<td>' + d.Status + '</td>' +
            '</tr>' +
        '</table>';
    }

    var iTableCounter = 1;
    var oTable;
    var oInnerTable;
    var detailsTableHtml;

    var source = {};
    var sourceDetail = {};
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: "Contact.aspx/DisplayMessage",
        contentType: 'application/json; charset=utf-8',
        cache: false,
        data: {},
        success: function (response) {
            source = $.parseJSON(response.d);
            alert(response.d); // i can see Json formatted data

            // templates 
            detailsTableHtml = $("#detailsTable").html();

            //Insert a 'details' column to the table
            var nCloneTh = document.createElement('th');
            var nCloneTd = document.createElement('td');
            nCloneTd.innerHTML = '<img src="http://i.imgur.com/SD7Dz.png">';
            nCloneTd.className = "center";

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

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


            //Initialse DataTables, with no sorting on the 'details' column
            var oTable = $('#exampleTable').dataTable({
                "bJQueryUI": true,
                "aaData": source,
                "bPaginate": false,
                "aoColumns": [
                    {
                        "mDataProp": null,
                        "sClass": "control center",
                        "sDefaultContent": '<img src="http://i.imgur.com/SD7Dz.png">'
                    },
                    { "mDataProp": "UserName" },
                    { "mDataProp": "Email" },
                    { "mDataProp": "Completed" }
                ],
                "oLanguage": {
                    "sInfo": "_TOTAL_ entries"
                },
                "aaSorting": [[1, 'asc']]
            });


            $('#exampleTable tbody td img').live('click', function () {
                var nTr = $(this).parents('tr')[0];
                var nTds = this;

                if (oTable.fnIsOpen(nTr)) {
                    /* This row is already open - close it */
                    this.src = "http://i.imgur.com/SD7Dz.png";
                    oTable.fnClose(nTr);
                }
                else {
                    /* Open this row */
                    var rowIndex = $(this).closest('tr');
                    var data = oTable._(rowIndex);
                    var varid = data[0].UserName;

                    jQuery.ajax({
                        type: 'POST',
                        dataType: 'json',
                        url: "Contact.aspx/GetDetail",
                        contentType: 'application/json; charset=utf-8',
                        cache: false,
                        data: '{ "Email": "hello@test.com" }',

                        beforeSend: function () {
                            alert("Working!");
                        },
                        success: function (response) {
                            //sourceDetail = $.parseJSON(response.d);
                            alert(response.d);

                        },
                        failure: function () {
                            alert("Error");
                        }
                    });
               this.src = "http://i.imgur.com/d4ICC.png";
            }
            });
        },
        //MAIN TABLE ERROR
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
        }
    });

Batman3535

Hi Srain,
Have you figured this out yet? I have a very similar issue where I display the current "live" records from the database. When I click on an item I want to go back to the database and get the history for that particular record but I am not sure how to do it.
No answer from datatables.net forums yet I guess?