DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

DataTables hidden row details example - the table header is misplaced (test case attached)

DataTables hidden row details example - the table header is misplaced (test case attached)

afarberafarber Posts: 53Questions: 0Answers: 0
edited September 2013 in General
Hello,

I'm trying to create a table where more details can be seen when the plus-image is clicked - similar to the DataTables hidden row details example

Unfortunately there is a warning being printed as JavaScript alert and also the table header is misplaced - as if there would be too many or not enough table cells in it.

You can see the screenshot at
http://stackoverflow.com/questions/18697986/datatables-hidden-row-details-example-the-table-header-is-misplaced-test-case

I have prepared a simple test case, which will work instantly, when you save it to a file and open it in a browser:

[code]
<!DOCTYPE HTML>









var data = [
{"Total":17,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":17,"Test":"GSM_1900_GMSK_TXPOWER_HP_H","Measurement":"MEASUREMENT"},
{"Total":8,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":8,"Test":"TX_PWR_64_54","Measurement":"POWER"}
];

$(function() {

function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '';
sOut += 'BSN:' + aData['Details']['BSN'] + '';
sOut += 'Station:' + aData['Details']['StationName'] + '';
sOut += 'Project:' + aData['Details']['ProjectName'] + '';
sOut += '';

return sOut;
}

var fails = $('#fails').dataTable({
bJQueryUI: true,
sPaginationType: 'full_numbers',
aaData: data,
aaSorting: [[2, 'desc']],
aoColumns: [
{ mDataProp: 'Test', bSearchable: true, bSortable: true },
{ mDataProp: 'Measurement', bSearchable: true, bSortable: true },
{ mDataProp: 'Total', bSearchable: false, bSortable: true },
{ mDataProp: 'A', bSearchable: false, bSortable: true },
{ mDataProp: 'B', bSearchable: false, bSortable: true },
{ mDataProp: 'C', bSearchable: false, bSortable: true },
{ mDataProp: 'D', bSearchable: false, bSortable: true },
]
});

var th = document.createElement('th');
var td = document.createElement('td');
td.innerHTML = '';

$('#fails tbody th').each(function() {
this.insertBefore(th, this.childNodes[0]);
});

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

$('#fails tbody').on('click', 'td img.details', function() {
var nTr = $(this).parents('tr')[0];
if (fails.fnIsOpen(nTr)) {
this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_open.png';
fails.fnClose(nTr);
} else {
this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_close.png';
fails.fnOpen(nTr, fnFormatDetails(fails, nTr), 'details');
}
});
});








Test
Measurement
Total
A
B
C
D








[/code]

Does anybody please have an idea, how to fix this?

I've tried adding/removing [code]Details[/code] in the HTML body, but it didn't help.

Thank you
Alex

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    1. You've got a trailing comma in aoColumns

    2. You are dynamically adding a column to the table after it has been initialised which you cannot do.

    2. Your aoColumns has 7 elements, but you have 8 in your table (after it has had the extra column added).

    Allan
  • afarberafarber Posts: 53Questions: 0Answers: 0
    Hello Allan, thanks for your reply.

    For 2: how to add a plus-image to every row of the table then? Since the data is coming from a JSON-array of objects, I don't know the number of rows in the table before calling $('#fails').dataTable(....)

    For 3: should I just use null as the first element in aoColumns?
  • afarberafarber Posts: 53Questions: 0Answers: 0
    And I have to use JSON data as source for the table. I can not use DOM, because I have to store the Details somewhere (the part of data which is being displayed when a plus-image is clicked).
  • afarberafarber Posts: 53Questions: 0Answers: 0
    Instead of creating a new table cell for each row, I've tried to prepend the plus-image to the content of the 1st cell of each row:

    [code]
    <!DOCTYPE HTML>









    var data = [
    {"Total":17,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":17,"Test":"GSM_1900_GMSK_TXPOWER_HP_H","Measurement":"MEASUREMENT"},
    {"Total":8,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":8,"Test":"TX_PWR_64_54","Measurement":"POWER"}
    ];

    function propTest(data, type, val) {
    if (type === 'set') {
    data.name = val;
    data.display = ' ' + val;
    return;
    }

    if (type === 'display') {
    return data.display;
    }

    // 'sort', 'type', 'filter' and undefined
    return data.name;
    }

    $(function() {

    function fnFormatDetails(oTable, nTr) {
    var aData = oTable.fnGetData(nTr);
    var sOut = '';
    sOut += 'BSN:' + aData['Details']['BSN'] + '';
    sOut += 'Station:' + aData['Details']['StationName'] + '';
    sOut += 'Project:' + aData['Details']['ProjectName'] + '';
    sOut += '';

    return sOut;
    }

    var fails = $('#fails').dataTable({
    bJQueryUI: true,
    sPaginationType: 'full_numbers',
    aaData: data,
    aaSorting: [[2, 'desc']],
    aoColumns: [
    { mDataProp: propTest, bSearchable: true, bSortable: true },
    { mDataProp: 'Measurement', bSearchable: true, bSortable: true },
    { mDataProp: 'Total', bSearchable: false, bSortable: true },
    { mDataProp: 'A', bSearchable: false, bSortable: true },
    { mDataProp: 'B', bSearchable: false, bSortable: true },
    { mDataProp: 'C', bSearchable: false, bSortable: true },
    { mDataProp: 'D', bSearchable: false, bSortable: true }
    ]
    });

    $('#fails tbody').on('click', 'td img.details', function() {
    var nTr = $(this).parents('tr')[0];
    if (fails.fnIsOpen(nTr)) {
    this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_open.png';
    fails.fnClose(nTr);
    } else {
    this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_close.png';
    fails.fnOpen(nTr, fnFormatDetails(fails, nTr), 'details');
    }
    });
    });








    Test
    Measurement
    Total
    A
    B
    C
    D








    [/code]

    Unfortunately, for some reasons the content of the 1st cell becomes "null" -
    as you can see in the 2nd screenshot at
    http://stackoverflow.com/questions/18697986/datatables-hidden-row-details-example-the-table-header-is-misplaced-test-case

    Thank you for any hints
    Alex
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.