Ajax data load doesn't works without first one

Ajax data load doesn't works without first one

anonymcatanonymcat Posts: 2Questions: 1Answers: 0
edited March 2023 in Free community support

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.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

  • anonymcatanonymcat Posts: 2Questions: 1Answers: 0

    Just, thank you. I appreciate your help.

Sign In or Register to comment.