Datatable stops working after updating the page via AJAX

Question

I have a page with a table that is updated via AJAX.
That way, I have a combo that when I select the option, the table is updated without refreshing.

In this table, I need the option to sort and thought to use Datatable.

The table follows the example of the image below.

[![insert image description here][1][1]

When I enter the page, the Datatable order works normally. However, when I change the option in the field, for example, to "Round 2", the table data is updated and the Datatable kind of disappears.
The order stops working and only comes back if I give F5 on the page.

    $(document).ready(function() {
        $('#tabelaNotaFinal').DataTable({
            "paging": false,
            "searching": false,
            "info": false,
            "language": {
                "lengthMenu": "Display _MENU_ records per page",
                "zeroRecords": "Nothing found - sorry",
                "info": "Showing page _PAGE_ of _PAGES_",
                "infoEmpty": "No records available",
                "infoFiltered": "(filtered from _MAX_ total records)"
            }
        });
    });

jquery-3.5.1.min. js
jquery.dataTables.min.js

Has anyone ever had a similar problem?

Thank you in advance. [1]: https://i.stack.Imgur.com/jjJHG.png

Answer 1

datatable already has the AJAX function itself, which receives the values and automatically updates the table rows.

They have several customization options, including option to do Entries.

Take a look at the documentation page that explains how to apply the datatable AJAX itself:

https://datatables.net/reference/option/ajax