Ajax data load doesn't works without first one

anonymcat

Hey, I have a datatable. On page load, it should initialize the table first without any data and after a click, load data from ajax source. Unfortunately it doesn't work when I don't set a default data source first.

It loads the data, but they're not populated in the table. Just get an error "Uncaught TypeError: Cannot read properties of undefined (reading 'length')" in the console. If I set the ajax source in the initialization (even if it doesn't return anything), it works as it should.

my configuration:

var datatable = $('#datatables_table').DataTable({
                retrieve: true,
                order: [[1, 'asc']],
                responsive: {
                    details: {
                        type: 'none',
                        target: 1,
                    },
                },
                ajax: {
                    url: '/import/data/12', //it works on this value set
                    dataSrc: ''",
                },
                initComplete: function(){
                    setTimeout(function(){
                        $('.dataTables_wrapper').css('visibility', 'visible');
                        $('.datatables_table').css('visibility', 'visible');
                        $('.loader').css('visibility', 'hidden');
                    }, 1000);
                },
                language: {
                    url: '/lang/cz.json'
                },
                /* columnDefs: [
                    {
                        targets: 0,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            return '<input type="checkbox" name="selectedRow" value="' + data + '"  class="w-5 h-5 md:w-4 md:h-4">';
                        }
                    },
                ], */
                columns: [
                    { data: 0,
                        render: function (data, type, row, meta) {
                            return '<input type="checkbox" name="selectedRow" value="' + data + '"  class="w-5 h-5 md:w-4 md:h-4">';
                        }
                    },
                    { data: 1 },
                    { data: 2 },
                    { data: 3 },
                ],
            });

            $('#selected_group').change(function(e){
                $('.loader').css('visibility', 'visible');
                datatable.ajax.url('/import/data/' + $(this).val()).load(function(){
                    $('.loader').css('visibility', 'hidden');
                });
            });

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

There are a couple of approaches you can do here to resolve this. This example defines the ajax properties after the load, while this example (from this thread) just retrieves the data outside of the DataTables environment, and adds the records.

Colin

anonymcat

Just, thank you. I appreciate your help.