jquery datatable Manipulate data after ajax call

Question

I have this ajax function which gets the data:

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);
                    }
});

Then I initialize a jquery datatable with $('#fertil-app-table').DataTable() . When using it this way the the datatable built in methods such as columnDefs does not work.

How can I combine the ajax and manipulate the data after receiving it from the server with jquery datatables?

Answer 1

Okay so I found a way to combine the ajax and render a jquery datatable with the rowCallback method. 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');
            }
        }
    });
});

With the callback you can the manipulate the table. My question should actually have been How do I add custom properties and attributes to td elements using jquery datatables?