如何编辑datatable json响应？
如何编辑datatable json响应？
提问于 2018-06-08 02:30:52
我需要编辑此代码的columns部分，以便为json响应生成的表更改tr和td的内容。例如，为了使用click event，我需要在EFICAZ_TAB_RESULTADO列上插入一个超链接。
我不知道怎么做这个任务，我需要帮助！
$(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"}, // if EFICAZ_TAB_META é diferente de EFICAZ_TAB_RESULTADO
{"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")
});回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-08 10:24:04
我建议使用rowCallback。这使您可以在将行绘制到表中时对其进行修改。您只需选择相应行中的单元格即可对其进行修改。我建议在该列中添加一个类：
- 添加列类
columns: [
...
{
"data": "EFICAZ_TAB_RESULTADO",
"className": "hyperlinkClass"
}
...
]
每次绘制新行时修改该单元格
rowCallback: function(row, data, iDisplayIndex) {
$(row).find(".hyperlinkClass").html('<a href="ENTER HYPERLINK HERE" target="_blank">HYPERLINK TEXT</a>');
}
Stack Overflow用户
发布于 2018-06-08 08:23:04
您可以通过使用单击属性来实现此目的，例如，在EFICAZ_TAB_RESULTADO列上添加一个columnDefs事件：
columnDefs: [{
"targets": [6],//index of EFICAZ_TAB_RESULTADO
"createdCell": (td, cellData, rowData, row, col) => {
$(td).css({
'color': '#007bff',
'cursor': 'pointer'
});
$(td).attr('title', 'Click Me');
$(td).click(e => {
alert(cellData) //call the function here
})
}
}
]Fiddle供您参考。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50747989
复制相关文章
相似问题