You doubt making a Json

Question

Hello, I have the following Json.

And I would like to show the Total value in a 'p', I am using the datatables to display the values of the "date". I am using the https://datatables.net/examples/api/row_details.html as an example. And to mount the table I use(just one example, mine is equal only with the data I wish):

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "../ajax/data/objects.txt",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "order": [[1, 'asc']]
    } );

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

    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()) ).show();
        tr.addClass('shown');
    }
} );

Table html looks like this:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Salary</th>
        </tr>
    </thead></table>

I would like to add a p at the bottom of the table with this total value. But I don’t know how to create this. Thanks in advance.

Answer 1

Friend,

You can capture the returned data in ajax and handle this outside of datatable.

From what I understand you want to create a paragraph after the table containing the value, right?

Try this:

table.on( 'xhr', function () {
    var json = table.ajax.json();
    console.log(json);
} );

By your example of JSON would look something like this:

table.on( 'xhr', function () {
    var json = table.ajax.json();
    document.getElementById('meuParagrafo').innerText = json.valorTotal;
} );