jquery datatable 在ajax调用后操作数据

Question

我有这个获取数据的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>';

                        }

                        $('#fertil-app-table tbody').html(html);

                    }

});

然后我用$('#fertil-app-table').DataTable(). 当以这种方式使用它时，数据表内置的方法columnDefs不起作用。

在使用 jquery 数据表从服务器接收数据后，如何组合 ajax 和操作数据？

Answer 1

好的，所以我找到了一种结合 ajax 并使用该方法呈现 jquery 数据表的rowCallback方法。IE：$(function() {&nbsp; &nbsp; $('#fertil-app-table').DataTable({&nbsp; &nbsp; &nbsp; &nbsp; processing: true,&nbsp; &nbsp; &nbsp; &nbsp; serverSide: true,&nbsp; &nbsp; &nbsp; &nbsp; ajax: "{{ route('admin.fertil.apply.app_table', $fertiluser[0]->id) }}",&nbsp; &nbsp; &nbsp; &nbsp; fnDrawCallback: calcTableColumns,&nbsp; &nbsp; &nbsp; &nbsp; columns: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'type', name: 'type'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'description', name: 'description'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'kg_ha', name: 'kg_ha'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'land_delivery', name: 'land_delivery'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'SG', name: 'SG'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'delivery_ha', name: 'delivery_ha'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'N', name: 'N'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'P', name: 'P'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'K', name: 'K'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'Ca', name: 'Ca'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'Mg', name: 'Mg'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'S', name: 'S'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'Zn', name: 'Zn'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'B', name: 'B'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'Cu', name: 'Cu'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'Fe', name: 'Fe'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'Mn', name: 'Mn'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'Mo', name: 'Mo'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'depot', name: 'depot'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'delivery_price', name: 'delivery_price'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'price_per_ha', name: 'price_per_ha'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'price_per_land', name: 'price_per_land'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'withdraw_prod', name: 'withdraw_prod'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'amend', name: 'amend', orderable: false, searchable: false},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'but', name: 'but', orderable: false, searchable: false}&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; rowCallback: function(row, data, index){&nbsp; //use the callback to add custom properties and attributes with their respective values&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('td:eq(0)', row).attr('id', data['id']);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('td:eq(2)', row).attr('id', 'kgha_' + data['id']);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('td:eq(2)', row).attr('className', 'reviewer');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('td:eq(2)', row).prop('contenteditable', true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(data["tid"] == 8){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('td', row).css('background-color', '#28a745');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('td', row).css('color', 'white');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});通过回调，您可以操作表格。我的问题实际上应该是How do I add custom properties and attributes to td elements using jquery datatables?