Recommendation request: which example to base my table on

Anonymole

Tribe,
I've got to build a table that looks like this:

From Json that looks like this: JSON here

Can anyone recommend which example I should use to get started? Just a pointer really. Datatables is so full featured I just don't know where to start.

Thanks, AM

allan

I would suggest reading through the data section of the manual to start with.

Also your "JSON" isn't really JSON - it is just a string (note the " that starts the string).

Allan

Anonymole

Allan, Thanks. Will read that. It's JSON formatted, just that I copied it from the InteractiveUI printed out of VS (which adds quotes to strings).

Anonymole

All, I was successful in building the initial parent table.

And I've used the row click code to show/hide child content.

However this content is statically created using primitive, manual table, row cell construction which returns a dom snippet, which seems the wrong way to do this.

I'm sure there's a way to inject another datatable into the child area but I've been unsuccessful in find an example. The data for the child table is contained within the row.data() of row being clicked. And I can see to pass this data into a format function. And this would be OK if I could build a new dataTable and fetch the DOM html out of it to pass back as the injected HTML. (that seems broken too but it would suffice.)

JSON arrays within JSON arrays seems like a natural and common pattern to show. And showing datatables within datatables the obvious choice to handle this. And examples of this?

Anonymole

Or, let's say I just wanted to build a datatable and return the HTML...

//
function formatChildTable(selectedTableRow, parentJsonObject) {

    var childTable = selectedTableRow.DataTable({
        "data": parentJsonObject.ArrayOfChildDetails,
        "paging": false,
        "processing": true,
        "columns": [
            { "data": "Timestamp", "title": "Timestamp" },
            { "data": "InstrumentSymbol", "title": "Symbol" },
            { "data": "TradeType", "title": "Type" },
            { "data": "PositionQty", "title": "Qty" },
            { "data": "CurrentPrice", "title": "Current" },
        ]
    });

    return childTable;
}

How might I do this. This obviously doesn't work. But can I do

    var childTable = $.DataTable({ ...

or

    var childTable = $('<div></div>').DataTable({ ...

or ... any recommendations?

This is all part of that:

// This row is already open - close it
if (row.child.isShown()) {
    row.child.hide();
    tr.removeClass('shown');
}
    // Open this row
else {
    row.child(formatChildTable(tr, row.data())).show();
    tr.addClass('shown');
}

Anonymole

Got it. This works...

//
function formatChildTable(selectedTableRow, parentJsonObject) {

    var childTable = $('<table class="display" id="childTable"></table>');
    var childDataTable = childTable.DataTable({
        "data": parentJsonObject.ArrayOfChildDetails,
        "paging": false,
        "processing": true,
        "columns": [
            { "data": "Timestamp", "title": "Time" },
            { "data": "Symbol", "title": "Sym" },
            { "data": "TradeType", "title": "Type" },
            { "data": "PositionQty", "title": "Qty" },
            { "data": "CurrentPrice", "title": "Price" },
        ]
    });

    return childTable.parent();

allan

Good to hear :-)

Allan