Hide / Show Details for row not working

arnjmllr

I copied the code example (http://legacy.datatables.net/release-datatables/examples/api/row_details.html) for the Hide / Show details for a row. I'm missing something. the details rows are being added but the icons do not show. if i use the sDefaultContent "option" with the same path to the image they will appear, I used the DataTables debugger for the code below (and found I misspelled Sortable), but that did not make a difference.

debug code: otades

My javascript:

var data;

/* Formating function for row details */
function fnFormatDetails(oTable, nTr) {
alert("hi");
var aData = oTable.fnGetData(nTr);
var sOut = '

'; sOut += ''; sOut += ''; sOut += ''; sOut += '

Rendering engine:
Link to source:	Could provide a link here
Extra info:	And any further details here (images etc)

';

return sOut;
//return "";

}

$(document).ready(function () {

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


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

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

var oTable = $("#summaryGrid").dataTable({
    "bProcessing": true,
    "sAjaxSource": "http://localhost/Tasq.Web/MyTeam/summary?pod=17&role=-1&groupBy=0",
    "aoColumns": [
        { "mData": null, "bSearchable": false, "bSortable": false },
        { "mData": "itemDescription" },
        { "mData": "pastDue" },
        { "mData": "dueToday" },
        { "mData": "future" },
        { "mData": "all" }
    ],
    "aoSorting": [[1, 'asc']]
});

//I'm adding a comment here, not in my actual code, but I get an error if I have .live
//object does not support method. So changed to .on

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

});

HTML

Assigned To / Queue	Past Due	Due Today	Future	All

Thanks in advance.

Aaron

arnjmllr

Turns out that the
$('#summaryGrid tbody td').on('click', function () {

is not correct should be

$('#summaryGrid').on('click', 'td' function () {

works like a charm now.

ThomD

Glad you found a solution, but there is a typo in your working example. You are missing a comma.

Should be

$('#summaryGrid').on('click', 'td', function () {