All interaction clears data in table

mortenf

Hi,
I have two tables on one page, table1, and table2, table1 is working flawlessly. Table2 loads correctly but if I try to sort by clicking on the columnsor even if I call the method again, the the table is empty. I have a function that deletes a row from my db, and I also tried templatetable.rows(id).remove().draw() in the delete callback function which also clears the whole table for data.On initial load all is good

Pls. help, thanks

Code, the one that doesn'r work

This clears the table data. Same method gets called on page load and loads just fine.

I have similar code on many pages also with multiple tables on same page and everything is working.

There's no errors in the console (!!) and when writing each row in createdRow the data is logged correctly in the console

$("#testbtn").on("click",
        function () {
            LoadTemplates();


        });

function LoadTemplates() {
        if (templatetable) {
            
            $('#templateTable').DataTable().destroy();
           
        }
        $.get("/api/konkurs/template", (data) => {
            templatetable = $('#templateTable').DataTable({
                data: data.templates,
                dom: '<"inline pull-left">t<"inline">',
                rowId: 'id',
                scrollResize: true,
                scrollY: 190,
                scrollCollapse: true,
                ordering: false,
                paging: false,
                "aoColumns": [

                    {
                        "data": "title"
                    },
                    {
                        "data": "description"
                    },
                    {
                        "data": null

                    }

                ],
                "columnDefs": [
                    {
                        "render": function (data, type, row) {
                            return '<span class="delete" style="color: red;float: right;"><i class="fad fa-trash-alt"></i></span>';
                            return "";

                        },
                        "targets": 2
                    }


                ],

                "createdRow": function (row, data, index) {

                    // console.log(data);
                }
            });
            $('#templateTable tbody').on('click', 'tr td:last-child', function () {
                var item = templatetable.cell(this).data();
                $("#deleteItemId").val(item.id);
             
                $("#dialogWarning").modal("show");
            });
          
        })


    }

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

kthorngren

but if I try to sort by clicking on the columns

You have ordering set false which disables sorting so I'm not sure how you are sorting the table.

even if I call the method again, the the table is empty.

Other than that there is nothing obvious in your code snippet that looks like a problem. Maybe do some debugs of what happens when you call the method again. We will need to see the problem so we can debug the code. Please post a link to your page or a test case replicating the issues so we can take a look.

Kevin

mortenf

Thanks, the ordering was changed for test. Actually I just found out that it is working before the load of the second table. So it somehow breaks the context from the first when the second is loaded? I'll try and set up a test to show you

Thanks