Add data for dynamic columns

hkhoanguyen

Hi, I'm building the Datatable with dynamic columns by one for loop,
after that, my json has a nested node (CmModel), which contains 2 variables (qty and total) for 2 columns

My question is how to define the data of json to those dynamic columns.

My json data:

{
"ProductName":"Amandes effilées",
"ProductUs":"au Kg",
"InitialQty":"1.00",
"InitialPmp":"1.00",
"TotalInitial":"1.00",
"PurchaseQty":"1.00",
"PurchasePmp":"1.00",
"TotalPurchase":"1.00",
"FinalQty":"1.00",
"FinalPmp":"1.00",
"TotalFinal":"1.00",
"ConsomQty":"1.00",
"ConsomPmp":"1.00",
"ConsomTotal":"1.00",
"CmModel":[
{
"qty":"0",
"total":"0"
},
{
"qty":"0",
"total":"0"
},
{
"qty":"0",
"total":"0"
},
{
"qty":"0",
"total":"0"
},
{
"qty":"0",
"total":"0"
},
{
"qty":"0",
"total":"0"
},
{
"qty":"0",
"total":"0"
}
]
},

var predefinedCols =
[
{ "data": "ProductName" },
{ "data": "ProductUs" },
{ "data": "InitialQty" },
{ "data": "InitialPmp" },
{ "data": "TotalInitial" },
{ "data": "PurchaseQty" },
{ "data": "PurchasePmp" },
{ "data": "TotalPurchase" },
{ "data": "FinalQty" },
{ "data": "FinalPmp" },
{ "data": "TotalFinal" },
{ "data": "ConsomQty" },
{ "data": "ConsomPmp" },
{ "data": "ConsomTotal" },
];

                var totalCol = JSON.parse(returnReportData)[0].CmModel.length;

                /*Add Columns*/
                for (var i = 0; i < totalCol; i++) {
                    predefinedCols.push({ "data": "CmModel.qty" });
                    predefinedCols.push({ "data": "CmModel.total" });
                };

/Table/

var table = $('table.tblReportData2').DataTable({
"processing": true,
"serverSide": false,
"bSortClasses": false,
"aaData": JSON.parse(returnReportData),
"columns": predefinedCols,
bDeferRender: true,
scrollY: "600px",
scrollX: true,
scrollCollapse: true,
paging: false,
info: false,
searching: false,
"autoWidth": true,
fixedHeader: {
header: true,
footer: true
},
"language": {
"emptyTable": reportDetail.reportDetailsOption.text.noData
}
});

Thanks

hkhoanguyen

I tried "data": "CmModel.qty" but it doesn't recognize the string

allan

You need to use the array syntax option of columns.data. For example CmModel[, ].qty to display the qty parameters in a comma seperated string. If you want a sum of those caiea you'd need to use columns.render.

Allan

hkhoanguyen

Thanks Allan for your reply,

I have tried to set the columns as following but the data in CMModel cannot be accessed.

"columns": [
{ "data": "ProductName" },
{ "data": "ProductUs" },
{ "data": "InitialQty" },
{ "data": "InitialPmp" },
{ "data": "TotalInitial" },
{ "data": "PurchaseQty" },
{ "data": "PurchasePmp" },
{ "data": "TotalPurchase" },
{ "data": "FinalQty" },
{ "data": "FinalPmp" },
{ "data": "TotalFinal" },
{ "data": "ConsomQty" },
{ "data": "ConsomPmp" },
{ "data": "ConsomTotal" },
{ "data": "CmModel[,].Qty"} /still not accessible/,
{ "data": "CmModel[,].Total"} /still not accessible/,
{ "data": "CmQty" },
{ "data": "CmTotal" }
],

Thanks in advanced

allan

Can you link to the page, or a debug trace so I can debug the issue please.

Allan

hkhoanguyen

Yes, I have done it, could you please check the link please : http://debug.datatables.net/ehewug thanks

allan

Thanks. You have serverSide enabled, but the response JSON is not in the required format. It doesn't have the required parameters.

Either you need to update your server-side script to support server-side processing, or disable server-side processing on the client-side (it should only be needed when working with tens of thousands of records), and also use ajax.dataSrc set to an empty string to tell DataTables to get the data from a root array.

Allan