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?