Recommendation request: which example to base my table on

Recommendation request: which example to base my table on

AnonymoleAnonymole Posts: 13Questions: 2Answers: 1

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

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 63,679Questions: 1Answers: 10,498 Site admin

    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

  • AnonymoleAnonymole Posts: 13Questions: 2Answers: 1

    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).

  • AnonymoleAnonymole Posts: 13Questions: 2Answers: 1

    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?

  • AnonymoleAnonymole Posts: 13Questions: 2Answers: 1

    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');
    }
    
    
  • AnonymoleAnonymole Posts: 13Questions: 2Answers: 1
    Answer ✓

    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();
    
    
  • allanallan Posts: 63,679Questions: 1Answers: 10,498 Site admin
    Answer ✓

    Good to hear :-)

    Allan

This discussion has been closed.