how to access list of object when defining columns for Datatable?
how to access list of object when defining columns for Datatable?
dinesh_thapa07
Posts: 9Questions: 2Answers: 0
oTable = $("#vPayables-results").dataTable({
"language" : {
"processing" : "processing...."
},
"processing" : true,
"serverSide" : true,
"searching" : false,
"preDrawCallback" : function(settings) {
if (settings._iDisplayLength > 0) {
}
},
"ajax" : {
"url" : payables_url,
"type" : "GET",
"data" : function(d) {
return $.extend({}, d, {
"format" : "json",
"fieldNames" : wexDtFilters.get("fieldNames"),
"operators" :wexDtFilters.get("operators"),
"fieldValue1" : wexDtFilters.get("fieldValue1"),
"fieldValue2" : wexDtFilters.get("fieldValue2")
});
},
"error" : function(xhr, status, text) {
if (xhr.status == 500) {
console.log(" returned:", xhr.status, text);
$('#dt_statusRow').html("<spring:theme code='manageorganizations.error.text'/>");
//document.location = "url relative or full";
} else {
console.log(" Ajax request error:", xhr.status, status,text);
$('#dt_statusRow').html("<spring:theme code='manageorganizations.error.text'/>");
}
}
},
/* "headerCallback" : function( thead, data, start, end, display ){
$(thead).find('th').eq(0).html( 'Displaying '+(end-start)+' records' );
}, */
"columns" : [
{
"name" : "uniqueId",
"data" : "uniqueId",
'bSortable': false
}, {
"name" : "status",
"data" : "status",
"searchable" : true
}, {
"name" : "createdDate",
"data" : "createdDate",
"searchable" : true
}, {
"name" : "createdBy",
"data" : "createdBy",
"searchable" : true
} , {
"name" : "cardInfo",
"data" : "cardInfo",
"searchable" : true
} , {
"name" : "amount",
"data" : "amount",
"searchable" : true
} , {
"name" : "currency",
"data" : "currency",
"searchable" : true
} , {
"name" : "matchedTxnAmount",
"data" : "matchedTxnAmount",
"searchable" : true
}, {
"name" : "vdfList",
"data" : "vdfList",
"searchable" : true
}, {
"name" : "udfList",
"data" : "udfList",
"searchable" : true
},{
"name" : "effectiveFrom",
"data" : "effectiveFrom",
"searchable" : true
} , {
"name" : "effectiveTo",
"data" : "effectiveTo",
"searchable" : true
} , {
"name" : "deliveryMethod",
"data" : "deliveryMethod",
"searchable" : true
} , {
"name" : "deliveryAddress",
"data" : "deliveryAddress",
"searchable" : true
} , {
"name" : "deliveryStatus",
"data" : "deliveryStatus",
"searchable" : true
} , {
"name" : "lastUpdatedDate",
"data" : "lastUpdatedDate",
"searchable" : true
} , {
"name" : "lastUpdatedBy",
"data" : "lastUpdatedBy",
"searchable" : true
}
],
dom: '<"top"<"col-sm-4" l><"col-sm-4" i><"col-sm-4" T>>rt<"bottom"<"col-sm-12" p>><"clear">',
"oTableTools": {
"aButtons": [
{
"sExtends": "ajax",
"sButtonText": "XLS",
"sButtonClass": "btn btn-secondary btn-sm"
},
{
"sExtends": "ajax",
"sButtonText": "CSV",
"sButtonClass": "btn btn-secondary btn-sm"
}
]
},
"paging" : true,
"pagingType" : "ellipses",
"autoWidth" : true,
"legacy" :true,
scrollX: true,
"rowCallback" : function(row, data) {
var editPaybleLabel = "Edit";
var deletePayableLabel = "Delete";
var cardInfoLabel="Card Information";
},
"initComplete" : function(row, data){
}
});
$('#gridWrapper').animate({height:666},500,function(){
this.style.height="auto";
this.style.overflow="visible";
});
} else {
oTable.fnDraw();
}
return false;
}
here is my DTO class that i am mapping to columns:
private String status;
private String createdDate;
private String createdBy;
private String cardInfo;
private String amount;
private String currency;
private String matchedTxnAmount;
private List<UserDefinedFieldsDTO> udfList;//it has fieldName and fieldValue
private List<UserDefinedFieldsDTO> vdfList;////it has fieldName and fieldValue
private String effectiveFrom;
private String effectiveTo;
private String deliveryMethod;
private String deliveryAddress;
private String deliveryStatus;
private String lastUpdatedDate;
private String lastUpdatedBy;
private String uniqueId;
In columns attribute, udfList and vdfList are list of object and i am really not sure how to access those list in that section. ANd also i have to generate headers for datatable dynamically since user's udfList and vdfList will affect the number of headers to display. basically besides these two list all others headers are static.
Is there someone who can help me on this scenario please?
This discussion has been closed.
Answers
Can you show us the generated JSON please?
Allan
Thanks Allan, i just submitted my part of Json object. The main problem i have here is: the headers and data for columns depends on user's click event on search button. so the list of values(udfList and vdfList) will have minimum 0 and maximum 15 values to display in data table. Now i am not able to figure it out how do i play with Dynamic headers and columns data which contains list of values to display in data table for end users.
I see - there is no option to dynamically add and remove columns in DataTables at the moment. You would need to create all required columns and use column visibility to dynamically disable and hide columns as needed.
How do you want the array data in
udfListto be displayed? Is that what should be in additional columns?Allan
udfList has the values that should be displayed in additional columns. if this list has 5 elements then datatable should display 5 extra columns and if this has 10 elements then datatabble should display 10 extra columns besides other static columns that i mentioned above. udfList is the list of object which has displayName(header) and values(columns data). if you look at the json data for udfList above, it should give me two extra columns for "color", and "Nick Name" with data for these columns : "Green", and "Test" respectively
is there any way i can display those list values in columns definition as name value pair?. i tried with javascript dot separator and it is not working for list.
Okay, what you could do is:
The index counter will let DataTables read from the array (if I recall correctly), and the defaultContent will kick in if the requested property doesn't exist.
Allan
hi Allan,
i have couple of questions now. so udfList has headers(displayName) and column values(values). if i do { data: 'udfList.0.values', defaultContent: '' } then i am getting value for the column but in a same way can i do for sTitle? i tried for 'sTitle' and it did not work but it does work with data. And instead of hardcoding integer value 0 in data, how can i dynamically add it?
}
and next question is: is it possible to define 15 columns ahead as i know udList will have max 15 elements and later hide those columns which dont have data on it?
The title cannot be dynamically read from the Ajax data source - there is no option for that. If that is what you need you would need to make the Ajax call yourself and then populate the
columnsobject as required.Allan
the solution i took for this problem is: i used dataSrc function to modify my JSON object to contain only key: value pair instead of key:value with list as a value too. and after this i have plain key:value json object and able to do what i want to do.