Datatables error after ajax call, ASP.Net

Question

I'm using ajax to call a partial view with a table inside a div called "div-GVPrevision". I'm using datatables, but I'm getting an error after the ajax call, and it says:

"DataTables warning: table id=GVPrevision - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3"

This is the ajax code:

<script>
    function GVPrevision() {
        $('#GVPrevision').DataTable({
            "aaSorting": [],
            aLengthMenu: [
                [4, -1],
                [4, "Todo"]
            ],
            responsive: false
        });
    }
    $(document).ready(function () {
        GVPrevision();
        $('.btnagregar').click(function (event) {
            event.preventDefault();
            var data = {
                "codmov": $("#codmovf").val(),
                "fechainicio": $("#fechainiciof").val(),
                "fechatermino": $("#fechaterminof").val(),
                "rutentidad": $("#rutentidadf").val(),
                "motivo": $("#motivof").val()
            };
            $.ajax({
                url: "/Ficha/AgregarfooterPrevision",
                type: "POST",
                data: JSON.stringify(data),
                dataType: "json",
                contentType: "application/json",
                success: function (response) {
                    if (response.Success) {
                        $("#div-GVPrevision").load('@Url.Content("~/Ficha/GVPrevision")');
                        GVPrevision();
                    }
                    else
                        window.location.href = "@Url.Action("Prevision", "Ficha")";
                },
                error: function () {
                    console.log('Login Fail!!!');
                }
            });
        });
    });
</script>

Answer 1

as i believe the Database is initialized more then once since you are not showing the whole code i can only provide you this simple but not at all recommended soln is to destroy the data table and then call the GCPervision AGAIN its not at all recommended soln but is a soln , Just use Distroy function

    function GVPrevision() {
            $('#GVPrevision').DataTable({
                "aaSorting": [],
                aLengthMenu: [
                    [4, -1],
                    [4, "Todo"]
                ],
                responsive: false
            });
        }
        $(document).ready(function () {
            GVPrevision();
            $('.btnagregar').click(function (event) {
                event.preventDefault();
                var data = {
                    "codmov": $("#codmovf").val(),
                    "fechainicio": $("#fechainiciof").val(),
                    "fechatermino": $("#fechaterminof").val(),
                    "rutentidad": $("#rutentidadf").val(),
                    "motivo": $("#motivof").val()
                };
                $.ajax({
                    url: "/Ficha/AgregarfooterPrevision",
                    type: "POST",
                    data: JSON.stringify(data),
                    dataType: "json",
                    contentType: "application/json",
                    success: function (response) {
                        if (response.Success) {
                $('#GVPrevision').DataTable().destroy();
                            $("#div-
         GVPrevision").load('@Url.Content("~/Ficha/GVPrevision")');
                            GVPrevision();
                        }
                        else
                            window.location.href = "@Url.Action("Prevision", "Ficha")";
                    },
                    error: function () {
                        console.log('Login Fail!!!');
                    }
                });
            });
        });
    </script>  

Answer 2

You have called the DataTable method 2 times here, one after the document.ready method & another in AJAX success method:

$(document).ready(function () {
    GVPrevision(); // first call
    $('.btnagregar').click(function (event) {

        // data insertion here

        $.ajax({

            // other ajax options here

            success: function (response) {
                if (response.Success) {
                    $("#div-GVPrevision").load('@Url.Content("~/Ficha/GVPrevision")');
                    GVPrevision(); // second call - this will fail
                }
                else
                    window.location.href = "@Url.Action("Prevision", "Ficha")";
            },
            error: function () {
                console.log('Login Fail!!!');
            }
        });
    });
});

To solve this issue, you have 2 choices:

1. Remove one of the GVPrevision call either after document.ready or AJAX POST success part,

2. Use destroy method before creating another DataTable, together with bDestroy (sometimes the destroy method called fnDestroy, pick up which is the proper one for your DataTable version):

   function GVPrevision() {
       $('#GVPrevision').DataTable({
           "aaSorting": [],
           aLengthMenu: [
               [4, -1],
               [4, "Todo"]
           ],
           responsive: false,
           "bDestroy": true
       }).destroy(); // or fnDestroy()
   }
   

If you have DataTable version 1.10 or more, you can add destroy: true:

function GVPrevision() {
    $('#GVPrevision').DataTable({
        destroy: true // add this line
        "aaSorting": [],
        aLengthMenu: [
            [4, -1],
            [4, "Todo"]
        ],
        responsive: false,
    });
}

Reference:

Warning: Cannot reinitialise DataTable (DataTables Documentation)

Datatables warning(table id = 'example'): cannot reinitialise data table

Answer 3

I fixed the problem by replacing the code with the jquery $.post() method:

                    if (response.Success) {
                        $.post("/Ficha/GVPrevision", function (datos) {
                            $("#div-GVPrevision").html(datos);
                            GVPrevision();
                        })
                    }