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>

Possibly you're initializing `DataTable` twice, by calling `GVPrevision();` in jQuery AJAX `success` result. Try removing the second call & see if the error gone away. — Tetsuya Yamamoto, Jul 25 '17 at 05:45

score 0 · Answer 1 · answered Jul 25 '17 at 05:58

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>

score 0 · Answer 2 · answered Jul 25 '17 at 06:08

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:

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

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

I tried both, removing the GVPrevision call after AJAX POST success part, and after document.ready (so I left it after the ajax post success part), but the results are the same, the datatables stops working after the ajax call. — DavidM, Jul 25 '17 at 16:10
@DavidM Have you found any errors reported by browser console? Check if `GVPrevision` contains proper data to be loaded on DataTable after successful response. — Tetsuya Yamamoto, Jul 26 '17 at 00:48

score 0 · Accepted Answer · answered Jul 26 '17 at 03:10

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();
                        })
                    }

Datatables error after ajax call, ASP.Net

3 Answers3