Ajax call dynamically load datatables

navsnavya

I am trying to load the datatable from json which is returning attached in the css file some sample data
The reason for doing it this way is my columns are dynamic.

All the values in the keys are my column names and values are the data to be displayed against the column in the datatable.

http://live.datatables.net/dasejuca/6/edit

kthorngren

See the Data Source docs for the supports object data structure. It looks like each ro of your data is a list of obects with key/value pairs:

{"Key":"Status","Value":"Deactivated"},
{"Key":"Action","Value":"No longer trading total"},
{"Key":"Department","Value":"N/A"},
{"Key":"2021-10","Value":9},
{"Key":"2021-11","Value":21},
{"Key":"2021-12","Value":33},
{"Key":"2022-1","Value":45},
{"Key":"2022-10","Value":153},
{"Key":"2022-2","Value":57},
{"Key":"2022-3","Value":69},
{"Key":"2022-4","Value":81},
{"Key":"2022-5","Value":93},
{"Key":"2022-6","Value":105},
{"Key":"2022-7","Value":117},
{"Key":"2022-8","Value":129}],

You will need to convert this to a structure that Datatables supports. For example:

[
  {
    "Status": "Deactivated",
    "Action": "No longer trading total",
  ....
    "2022-8":129
  },
  {
  ...
  }
]

The best place to do this would be at the server script before returning the JSON data to the browser. However you could do it in the getData() function along with building the table headers.

Kevin

navsnavya

can you show me a sample of how i would convert my key value pair to match datatables structure..
i want to build the columns and data dynamically.

because the headers are dynamic td also should populate from json file from getdata

navsnavya

Hi
i was able to manipulate the date to below
with server side code

        var output = Newtonsoft.Json.JsonConvert.SerializeObject(cb_func);
        var stringman= Json(output, JsonRequestBehavior.AllowGet);

and js
data = data.replace(/\/g, '');

"[
{"Status":"Deactivated","Action":"No ","Department":"N/A","2021-10":9}
,{"Status":"Draft","Action":"Due in next 30 days","Department":"RM","2021-10":4}
,{"Status":"Draft","Action":"Overdue","Department":"RM","2021-10":1}
,{"Status":"Draft","Action":"Rejected","Department":"RM","2021-10":3}
]"

navsnavya

function getData(cb_func) {
    var URLWhole = $(location).attr('href');
    var   idre= URLWhole.match(/(\d+)$/g)
    $.ajax({
        url: '@Url.Action("abc", "home", new { id = 1 })',
        type: "GET",
        success: cb_func
    });
    };


$(document).ready(function () {
    getData(function (data) {
        var columns = [];
        data = JSON.stringify(data);
        alert(data.replace(/\\/g, ''));
        data = data.replace(/\\/g, '');
        console.log('Testing data' + data);
        columnNames = Object.keys(data[0]);
        alert(data);
        for (var i in columnNames) {
            columns.push({ data: columnNames[i], title: columnNames[i] });
        }
        $('#example').DataTable({
          data: data.data,
            columns: columns
        });
    });

});

how ever my datatables does not load yet..please advise.

kthorngren

I'm guessing the problem is wtih data: data.data, in line 25. Your data is not in an object data. Change to data: data,. If this doesn't help then please provide more dtails of what isn't working and what you ahve debugged.

Kevin

navsnavya

got it working
had to convert data = JSON.stringify(data);
back to data = JSON.Parse(data);

all falling along now awesome

for anyone struggling with similar problem here is the reference
http://live.datatables.net/fafuyeyu/1/edit

source for object.txt
url: "https://datatables.net/examples/ajax/data/objects.txt",