How to edit datatable json response?
How to edit datatable json response?
I need to edit the columns section of this code for change the content of <tr> and <td> for table generated by json response. For example, I need to insert a hyperlink on EFICAZ_TAB_RESULTADO column for use click event.
I don't know how to do this task and I need help!
$(document).ready(function(){
// Setup datatables
$.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings){
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
"iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
};
};
var table = $("#mytable").dataTable({
initComplete: function() {
var api = this.api();
$('#mytable_filter input').off('.DT').on('input.DT', function(){
api.search(this.value).draw();
});
},
oLanguage: {
sProcessing: "carregando ..."
},
processing: true,
serverSide: true,
searching: false,
ajax: {
"type": "POST",
"url": "/tab/getJsonAllOcorrenciasTabForMonth"
},
pageLength: 100,
columns: [
{"data": "EFICAZ_TAB_ID"},
{"data": "ID"},
{"data": "PERIODICIDADE"},
{"data": "EFICAZ_TAB_MES_ANO"},
{"data": "EFICAZ_TAB_ITEM_ID"},
{"data": "EFICAZ_TAB_META"},
{"data": "EFICAZ_TAB_RESULTADO"}
],
order: [
[1, 'asc']
],
rowCallback: function(row, data, iDisplayIndex) {
var info = this.fnPagingInfo();
var page = info.iPage;
var length = info.iLength;
$('td:eq(0)', row).html();
}
}); // end setup datatables
// addClass para formatar estilo bootstrap ...
$("#mytable_length select").addClass("form-control")
});
Answers
One option to create a hyperlink is to use
columns.render
. The doc page has a specific example for links.Kevin