Bind data from single AJAX DataSource for multiple tables

sritharan

I have a table like this:

table id="righttrackmapping" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>          
                  <th><h3>Street File</h3></th>
                  <th><h3>Material Group</h3></th>
                  <th><h3>Name</h3></th>
                  <th><h3>Categories Top</h3></th>                  
                  <th><h3>Data Mappings</h3></th>
                </tr>
            </thead>

            <tfoot>
                <tr>          
                  <th><h3>Street File</h3></th>
                  <th><h3>Material Group</h3></th>
                  <th><h3>Name</h3></th>
                  <th><h3>Categories Top</h3></th>                  
                  <th><h3>Data Mappings</h3></th>
                </tr>
            </tfoot>
            </table>

The dataTable javascript triggers the data like this:

$(document).ready(function(){
        $('#righttrackmapping').dataTable({
        "ajax": {"url" : "/api/acitems/embeddeddatareport",
            "dataSrc" : "rightTracksDataMapping"}       
    });
});

My Data Looks Like This:

{
acitemWithBucketList: [],
medianTracksDataMapping: [],
rightTracksDataMapping: {
data: [
{
streetFile: "/Styles/Street/Asphalt Road.ACItem",
materialGroup: "MaterialGroup/Roadway Surface Materials",
name: [
"Cobbles"
],
categoriesTop: [
"Asphalt Dark Grey"
],
rightTrackMappingData: [
"Material/Roadway/Suface Dark Grey Asphalt 2.048w 2.048h"
]
},

I want to bind the rightTracksDataMapping to the Html Datatable