Getting requested unknown parameter error even though initialised properly

kevinjt

I am using DataTables 1.11.3 and I was trying to initialise DataTable programmatically. This is the structure:

$('#table_a'+i).DataTable({
    language: {
        url: "{{ asset('demo1/plugins/custom/datatables/dataTables.id.json') }}"
    },
    "dom": "ltip",
    "pageLength" : 10,
    'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, 'All']],
    "colReorder": true,
    'processing': true,
    "fnInitComplete":function(){
        $("#table_a"+i).show();
    },
    // 'serverSide': true,
    // 'stateSave': true,
    'select': {
        'style': 'multi+shift'
    },
    'serverMethod': 'post',
    'ajax': {
        'url':"localhost:8000/prgl_search",
        'data': function(data){
            data._token = "{{ csrf_token() }}";
            data.parent = '{{ $modes->first()->NamaLaporanParent }}';
            data.mode = $('#tab_'+i).attr('search-mode');
            data.date1 = $('#tanggal_1').val().split("/")[2]+'-'+$('#tanggal_1').val().split("/")[1]+'-'+$('#tanggal_1').val().split("/")[0];
            data.date2 = $('#tanggal_2').val().split("/")[2]+'-'+$('#tanggal_2').val().split("/")[1]+'-'+$('#tanggal_2').val().split("/")[0];
        }
    },
    'columns': data.columns[i-1]
});

where data.columns[i-1] contain:
[{"data": "KodeBarang", "title": "Kode"},
{"data": "NamaBarang", "title": "Nama"},
{"data": "KodeProduk", "title": "Produk"},
{"data": "SaldoAkhir", "render": "DataTable.render.number(' . ', ', ', 2)", "title": "Saldo"},
{"data": "Keterangan", "title": "Keterangan"}]

i is index because this code is in a loop to initialise multiple DataTables. After initialisation, the ajax function is automatically called, and it successfully returned with this record:
[{"KodeBarang":"P0010002","NamaBarang":"B1","KodeProduk":"P001","SaldoAkhir":"16150.00000","Keterangan":""},{"KodeBarang":"P0010003","NamaBarang":"B2","KodeProduk":"P001","SaldoAkhir":"0.00000","Keterangan":""},{"KodeBarang":"P0010005","NamaBarang":"TEST1","KodeProduk":"P001","SaldoAkhir":"0.00000","Keterangan":""},{"KodeBarang":"P0010013","NamaBarang":"TES2","KodeProduk":"P001","SaldoAkhir":"0.00000","Keterangan":""}]

However, shortly afterwards I got the warning: Requested unknown parameter 'SaldoAkhir' for row 0, column 3. I already declared the column 3 data to be 'SaldoAkhir' and the record returned from the ajax call is also in the correct order. Is there something that I have been doing wrong?

Thank you

kthorngren

You have this:

'columns': data.columns[i-1]

Where is data defined? You columns need to be defined before initializing Datatables. See this FAQ and this example:
http://live.datatables.net/huyexejo/1/edit

Kevin

kevinjt

So this code is inside ajax call which looks like this:

$.ajax({
    ...
    success: function(data){
        for (let i = 1; i <= 3; i++) {
            if(...) {
                if(...){
                    if(typeof(data.columns[i-1]) != "undefined" && typeof(data.columns[i-1]) !== null){
                        $('#table_a'+i).DataTable({
                            language: {
                                url: "{{ asset('demo1/plugins/custom/datatables/dataTables.id.json') }}"
                            },
                            "dom": "ltip",
                            "pageLength" : 10,
                            'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, 'All']],
                            "colReorder": true,
                            'processing': true,
                            "fnInitComplete":function(){
                                $("#table_a"+i).show();
                            },
                            // 'serverSide': true,
                            // 'stateSave': true,
                            'select': {
                                'style': 'multi+shift'
                            },
                            'serverMethod': 'post',
                            'ajax': {
                                'url':"localhost:8000/prgl_search",
                                'data': function(data){
                                    data._token = "...";
                                    data.parent = '...';
                                    data.mode = $('#tab_'+i).attr('search-mode');
                                    data.date1 = $('#tanggal_1').val().split("/")[2]+'-'+$('#tanggal_1').val().split("/")[1]+'-'+$('#tanggal_1').val().split("/")[0];
                                    data.date2 = $('#tanggal_2').val().split("/")[2]+'-'+$('#tanggal_2').val().split("/")[1]+'-'+$('#tanggal_2').val().split("/")[0];
                                }
                            },
                            'columns': data.columns[i-1]
                        });
                    }
                }
            }
            else break;
        }
    },
    ...
});

The data.columns is an array, so I loop through the array to initialise DataTable.

allan

Can you use the debugger to give me a trace please - click the Upload button and then let me know what the debug code is.

Thanks,
Allan

kevinjt

Hello,

I found the solution. The render returned from the server is the one causing problem because it uses double quote. After I removed them and add the render on the Javascript, it works now.

Thank you

allan

Awesome - thanks for the update. Great to hear you got it working.

Allan