Edit data of nested ajax that gets returned as extra info in a new dataset

dvouth

Hi I have an ajax txt file that on click displays some extra info as a new data set, after the new table is opened as extra info I wish on click to edit a cell. The displaying part works fine I just do not know how to adapt the edit to my case. I'm very new to this so it may be an editor installaton details afaik.

my js:

/* Formatting function for row details - modify as you need */
function format(d, dataSet) {
    // `d` is the original data object for the row
    var table = '<table id="payment' + d.id + '" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
            '<td>Payment Method Id:</td>' +
            '<td>Card Type number:</td>' +
            '<td>Amount:</td>' +
        '</tr>'+
        '</table>';

    $.each(d.payment_methods, function (index, value) {
        dataSet.push([value.id, value.type, value.amount]);
    });

    return table;
}

var editor;

$(document).ready(function () {
    var table = $('#students').DataTable({
        "ajax": "data/objects.txt",
        "columns": [
        {
            "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": ''
        },
        { "data": "id" },
        { "data": "name" },
        { "data": "surname" },
        { "data": "dob" },
        ]
    });


    // Add event listener for opening and closing details
    $('#students tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);
        var dataSet = [];


        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child(format(row.data(), dataSet)).show();
            console.log(row.data());
            if (dataSet.length > 0) {
                var id = '#payment' +row.data().id;
                var payment_table = $(id).DataTable({
                    data: dataSet,
                    columns: [
                        { title: "id" },
                        { title: "type" },
                        { title: "amount" },
                    ]
                });

                editor = new $.fn.dataTable.Editor({
                    ajax: 'data/objects.txt',
                    table:  id,
                    columns: [
                       { data: "payment_methods.amount" }
                    ],
                    select: true,
                    buttons: [
                        { extend: "edit", editor: editor }
                    ]
                });

                $(id).on('click', 'tbody td', function () {
                    payment_table.cell(this).edit('bubble');
                });
            }
            tr.addClass('shown');
        }
    });

});

And my data/objects.txt (part of)

{
  "data": [
  {
        "id":1,
        "name":"Peter",
        "surname":"Smith",
        "dob":"01/01/1990",
        "payment_methods":[
                {
                "id":1,
                "type":"Credit Card",
                "amount":"150.00$"
                },
                {
                "id":2,
                "type":"Debit Card",
                "amount":"600.00$"
                },
                {
                "id":3,
                "type":"Debit Card",
                "amount":"230.00$"
                }
        ]
    },
    {
        "id":2,
        "name":"Helen",
        "surname":"Gartnet",
        "dob":"21/10/1990",
        "payment_methods":[
        {
                "id":1,
                "type":"Credit Card",
                "amount":"220.00$"
                },
                {
                "id":2,
                "type":"Debit Card",
                "amount":"1200.00$"
                }
        ]
    }
]
}

colin

Hi,

Take a look at this example, this looks to be exactly what you're trying to achieve.

Cheers,

Colin