如何解决jQuery datatable在ajax调用后处理数据
我有这个ajax函数来获取数据:
function fetch_data() {
$.ajax({
url: "{{ route('apply.app_table',$fertiluser[0]->id) }}",headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},method: 'GET',dataType: 'json',success: function(data){
const result = data['data'];
var html = '';
for (let i = 0; i < result.length; i++) {
const element = result[i];
html += '<tr id="' + result[i].id + '">';
html += '<td>' + result[i].type + '</td>';
html += '<td>' + result[i].description + '</td>';
html += '<td id="kgha_' + result[i].id + '" class="reviewer" style="background-color: #DF9881" contenteditable>' + result[i].kg_ha + '</td>';
html += '<td>' + result[i].land_delivery + '</td>';
html += '<td>' + result[i].SG + '</td>';
html += '<td>' + result[i].delivery_ha + '</td>';
html += '<td>' + result[i].N + '</td>';
html += '<td>' + result[i].P + '</td>';
html += '<td>' + result[i].K + '</td>';
html += '<td>' + result[i].Ca + '</td>';
html += '<td>' + result[i].Mg + '</td>';
html += '<td>' + result[i].S + '</td>';
html += '<td>' + result[i].Zn + '</td>';
html += '<td>' + result[i].B + '</td>';
html += '<td>' + result[i].Cu + '</td>';
html += '<td>' + result[i].Fe + '</td>';
html += '<td>' + result[i].Mn + '</td>';
html += '<td>' + result[i].Mo + '</td>';
html += '<td>' + result[i].depot + '</td>';
html += '<td>' + result[i].delivery_price + '</td>';
html += '<td>' + result[i].price_per_ha + '</td>';
html += '<td>' + result[i].price_per_land + '</td>';
html += '<td>' + result[i].withdraw_prod + '</td>';
html += '<td>' + '<a href="admin/fertil/apply/"' + result[i].id + '"/editapp">Wysig</a>' + '</td>';
html += '<td>' + '<button type="button" class="btn btn-info btn-sm apply_update"><i class="fa fa-floppy-o" aria-hidden="true"> Opdateer</i></button>';
html += '</tr>'
}
$('#fertil-app-table tbody').html(html);
}
});
然后我用$('#fertil-app-table').DataTable()
初始化一个jquery数据表。
以这种方式使用它时,内置于columnDefs
之类的方法中的数据表不起作用。
从服务器接收到带有jquery数据表的数据后,如何合并ajax并处理数据?
解决方法
好的,所以我找到了一种结合ajax并使用rowCallback
方法呈现jquery数据表的方法。即:
$(function() {
$('#fertil-app-table').DataTable({
processing: true,serverSide: true,ajax: "{{ route('admin.fertil.apply.app_table',$fertiluser[0]->id) }}",fnDrawCallback: calcTableColumns,columns: [
{data: 'type',name: 'type'},{data: 'description',name: 'description'},{data: 'kg_ha',name: 'kg_ha'},{data: 'land_delivery',name: 'land_delivery'},{data: 'SG',name: 'SG'},{data: 'delivery_ha',name: 'delivery_ha'},{data: 'N',name: 'N'},{data: 'P',name: 'P'},{data: 'K',name: 'K'},{data: 'Ca',name: 'Ca'},{data: 'Mg',name: 'Mg'},{data: 'S',name: 'S'},{data: 'Zn',name: 'Zn'},{data: 'B',name: 'B'},{data: 'Cu',name: 'Cu'},{data: 'Fe',name: 'Fe'},{data: 'Mn',name: 'Mn'},{data: 'Mo',name: 'Mo'},{data: 'depot',name: 'depot'},{data: 'delivery_price',name: 'delivery_price'},{data: 'price_per_ha',name: 'price_per_ha'},{data: 'price_per_land',name: 'price_per_land'},{data: 'withdraw_prod',name: 'withdraw_prod'},{data: 'amend',name: 'amend',orderable: false,searchable: false},{data: 'but',name: 'but',searchable: false}
],rowCallback: function(row,data,index){ //use the callback to add custom properties and attributes with their respective values
$('td:eq(0)',row).attr('id',data['id']);
$('td:eq(2)','kgha_' + data['id']);
$('td:eq(2)',row).attr('className','reviewer');
$('td:eq(2)',row).prop('contenteditable',true);
if(data["tid"] == 8){
$('td',row).css('background-color','#28a745');
$('td',row).css('color','white');
}
}
});
});
通过回调,您可以操作表。
我的问题实际上应该是How do I add custom properties and attributes to td elements using jquery datatables?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。