Trouble Binding Ajax Returned JSON Data to Datatables - Show/Hide Rows

rchinnam

Hi, I want to use REST API to return JSON data and bind it to Datatables and show/Hide information based on clicking row for details as in this example http://datatables.net/release-datatables/examples/server_side/row_details.html


(1) First part worked -- Fetching data and binding
(2) To show/Hide information not working with returned JSON from ajax call. ( This works with sample JSON data that i used, also included in comments server returned data)



Below script, works good for show/hide rows when cliked on +(plus) img to show details. couldnt make it work with actual returned data.
Can you provide some information/correction what i should be doing to bind AJAX returned data to datatables. Thanks for looking.




var data = [ {"Column3":"Security","Column4":"Controls Management","Details":{"Description":"Tech Description 1","Title":"R127"},"Title":"Title1","Column2":"Cisco","ID":1402},
{"Column3":"Client","Column4":"Browser","Details":{"Description":"Tech Description 2","Title":"R127"},"Title":"Title2","Column2":"IBM","ID":1426} ]; //sample data i used to make it work for show/hide rows




var data2 = $.ajax(
{
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('ListName1')/items$select=Title,Column1,Column3,Column4,ID",
type: "GET",
dataType: "json",
headers: { Accept: "application/json;odata=verbose" }
}
);// end ajax




data2.done(function (data,textStatus, jqXHR)
{

// alert(jqXHR.responseText); //server returned data below

/* Server Returned data
{"d":{"results":[
{"__metadata":{"id":"c314f8ac-1283-498d-8c7b-ab003eb50345","uri":"http://site/subsite/_api/Web/Lists(guid'4bf79ce6-1722-4e86-8e08-349ae0afff6d')/Items(1415)","etag":"\"7\"","type":"SP.Data.ListName1ListItem"},
"Id":1415,"Title":"Title1 Description","Column1":"STK","Column3":"Storage","Column4":"Storage Networking","ID":1415},
{"__metadata":{"id":"eec1a89d-15d7-43ef-a99e-2da4a3ff8069","uri":"http://site/subsite/_api/Web/Lists(guid'4bf79ce6-1722-4e86-8e08-349ae0afff6d')/Items(1434)","etag":"\"6\"","type":"SP.Data.ListName1ListItem"},"Id":1434,"Title":"Title2 Description","Column1":"STK","Column3":"Storage","Column4":"Storage Systems","ID":1434}

]

}} */ //not able to use this data in binding with datatables.



//alert(data.d.results[1].Title); //shows up Data




$(function()
{


$.fn.dataTableExt.sErrMode = 'throw' ;
//alert(jqXHR.responseText); //shows up json data
var TechTable = $('#table1').dataTable({


bJQueryUI: true,
aaData: data, // jqXHR.responseText.d.results -- not working with server returned data, works only with test data
aaSorting: [[2, 'desc']],
aoColumns: [
{ mData: 'Title', bSearchable: true, bSortable: true,
sContentPadding: "aaaaaaaaaaaaaa",
mRender:expandRenderer
},
{ mData: 'Column2'},
{ mData: 'Column3'},
{ mData: 'Column4'},
{ mData: function (source, type, val) {
return "Submit Request";
}

}
]

});




$('#table1 tbody').on('click', 'td span.expand', function() {
var nTr = $(this).parents('tr')[0];
if (TechTable.fnIsOpen(nTr))
{
$(this).removeClass('open');
TechTable.fnClose(nTr);

}
else
{
$(this).addClass('open');
TechTable.fnOpen(nTr, fnFormatDetails(TechTable, nTr), 'details');
}
});
});



}); //end data2 done function




function expandRenderer(data, type, full) {

switch(type) {
case 'display':
return ''+data+'';
case 'type':
case 'filter':
case 'sort': return data;
}

}


function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '';
sOut += 'Description: ' + aData.Title + '';
sOut += 'Domain: ' + aData.Domain1 + '';
return sOut;

}