Can't get dynamic table loaded with JSON to work to save my life.
Can't get dynamic table loaded with JSON to work to save my life.
I've tried a million combinations. I initialize the datatable on document ready;
$('#occTableData').dataTable({"sPaginationType": "bootstrap"} );
Here's the HTML:
ID
Title
Description
Status
Company
Account
Amount
Assigned To
Here's the javascript function. You can see the commented out section. I've tried that also.;
function populateData()
{
// Populate Row Data
$.ajax(
{
type: "GET",
url: 'api/occ/occStage.htm',
data: 'userId='+userId,
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function(adata)
{
// $("#occTableData").empty();
/// $("#occTableData").append('IDTitleDescriptionStatusCompanyAccountAmountAssigned To');
occData = adata;
/* $.each(adata, function(index,item)
{
alert(item.title);
$("#occTableData").append(''+
''+item.occStageId+''+
''+item.title+''+
''+item.description+''+
''+item.statusCd+''+
''+item.companyCd+''+
''+item.accountId+''+
''+item.amount+'');
$("#occTableData").datatable().fnAddData([item.occStageId,item.title,item,description,item.statusCd,item.companyCd,item.accountID,item.amount,item.assignedToUserid]);
});
*/
$('#occTableData').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"aoColumns": [
{ "mDataProp": "occStageId" },
{ "mDataProp": "title" },
{ "mDataProp": "description" },
{ "mDataProp": "statusCd" },
{ "mDataProp": "companyCd" },
{ "mDataProp": "accountId" },
{ "mDataProp": "amount" },
{ "mDataProp": "assignedToUserid" }
]
});
// $('#occTableData').dataTable().fnAddData([adata]);
} // end success
}); // end populate OCC data
}
Here's the JSON data;
[{"occStageId":"628","parentOccStageId":"628","instanceOrder":null,"accountId":"100050","companyCd":"RSS","createdDtTm":"2013-05-02","postByDt":"2013-05-02","createdByUserid":"c0123456","createdByName":"sudha Kukkala","billCycleCd":"R16","statusCd":"WORKING","amount":"-200.00","creditOrDebit":"C","chargeCd":"ADJPYMT","title":"occ new","assignedDtTm":"2013-05-02","assignedToUserid":"c0123456","assignedToName":"sudha Kukkala","billPeriodDt":null,"invoiceNo":null,"svcPlanCds":null,"description":"occ new","groupCd":"QAWH","fullName":null,"custAcct":null,"carrierId":null,"opcAccountId":null,"opcChargeCd":null},
$('#occTableData').dataTable({"sPaginationType": "bootstrap"} );
Here's the HTML:
ID
Title
Description
Status
Company
Account
Amount
Assigned To
Here's the javascript function. You can see the commented out section. I've tried that also.;
function populateData()
{
// Populate Row Data
$.ajax(
{
type: "GET",
url: 'api/occ/occStage.htm',
data: 'userId='+userId,
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function(adata)
{
// $("#occTableData").empty();
/// $("#occTableData").append('IDTitleDescriptionStatusCompanyAccountAmountAssigned To');
occData = adata;
/* $.each(adata, function(index,item)
{
alert(item.title);
$("#occTableData").append(''+
''+item.occStageId+''+
''+item.title+''+
''+item.description+''+
''+item.statusCd+''+
''+item.companyCd+''+
''+item.accountId+''+
''+item.amount+'');
$("#occTableData").datatable().fnAddData([item.occStageId,item.title,item,description,item.statusCd,item.companyCd,item.accountID,item.amount,item.assignedToUserid]);
});
*/
$('#occTableData').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"aoColumns": [
{ "mDataProp": "occStageId" },
{ "mDataProp": "title" },
{ "mDataProp": "description" },
{ "mDataProp": "statusCd" },
{ "mDataProp": "companyCd" },
{ "mDataProp": "accountId" },
{ "mDataProp": "amount" },
{ "mDataProp": "assignedToUserid" }
]
});
// $('#occTableData').dataTable().fnAddData([adata]);
} // end success
}); // end populate OCC data
}
Here's the JSON data;
[{"occStageId":"628","parentOccStageId":"628","instanceOrder":null,"accountId":"100050","companyCd":"RSS","createdDtTm":"2013-05-02","postByDt":"2013-05-02","createdByUserid":"c0123456","createdByName":"sudha Kukkala","billCycleCd":"R16","statusCd":"WORKING","amount":"-200.00","creditOrDebit":"C","chargeCd":"ADJPYMT","title":"occ new","assignedDtTm":"2013-05-02","assignedToUserid":"c0123456","assignedToName":"sudha Kukkala","billPeriodDt":null,"invoiceNo":null,"svcPlanCds":null,"description":"occ new","groupCd":"QAWH","fullName":null,"custAcct":null,"carrierId":null,"opcAccountId":null,"opcChargeCd":null},
This discussion has been closed.