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() {

    $('#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', orderable: false, 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)', row).attr('id', '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?