How to spilt JSON object across two tables

teamerMan

Hi Everyone,

I currently return a JSON object that contains about 10 fields. What I wish to do is to make 3 tables from this one JSON. Each table will contain a subset of the JSON object. For example:

The JSON object looks like this:

{ id: 1234 , totalCars : 3, totalsBike : 4, totalBoat : 5, store1 : 3, store2 : 8, store3 : 5}

I want to have two tables

Table 1

Total Cars , TotalBike, TotalBoat
3 , 4 , 5

Table 2

Store1 , Store 2, Store 3
5 , 8 , 5

I have looked at the example of Multiple tables but that is with static data and I cannot figure out how to modifiy it for my requirments. Currently a workaround I am looking to do is call my js function for each table and limit the number of columns. For example

$('#totalTable').DataTable( {
            
            "deferRender": true,
            "ajax": {
                url: '/JsonTest',
                async: "true",
                dataSrc: ''
            },
            "columns": [
                {"data":totalBike", "defaultContent":""},
                {"data":"totalCar", "defaultContent":""},
                {"data":"totalBoat", "defaultContent":""},
                
            ]
        } );

I understand this not very efficient as it make 2 calls to the server side to return the same data

How can I do this using DataTables with using a single call?

Many thanks in advance

allan

What to do is initialise just one table with the ajax option - leave the other two with just empty data. Then use initComplete for the Ajax table which gives you the JSON object when it is loaded. You can then use rows.add() for the other two tables to load the data into them.

Regards,
Allan