Unable to build a DataTable from AJAX

Question

Actually i have a WebMethod in my VB.NET page where i fetch some data from MySQL.

I'm trying to create a table with that data by using jQuery DataTable

The JSON i get from server side is build as the following:

    d: "[{"DESOP_LOG":"OPERATORE","OPERAZIONE_LOG":"LOGIN","FORM_LOG":"frmCASSA","CODART_LOG":""},{"DESOP_LOG":"OPERATORE","OPERAZIONE_LOG":"LOGOUT","FORM_LOG":"frmCASSA","CODART_LOG":""}...

As i would that the DataTable head will be parsed from that json the table i'm trying to cast DataTable is the following

<table class="table table-hover" id="table"></table>

As there is no head i'm getting error: Cannot read property 'aDataSort' of undefined

While if i set just a random head i fill get as ajax response the following

DataTables warning: table id=table - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

Here is how's build the DataTable

$('#table').DataTable({
    responsive: true,
    serverSide: false,
    processing: false,
    lengthChange: false,
    pageLength: 5,
    info: false,
    dom: '<t><p>',
    pagingType: "numbers",
    language: {
        search: "Cerca:",
        paginate: {
            first: "Inizio",
            last: "Fine",
            next: "Successivo",
            previous: "Precedente"
        },
    },
    ajax: {
        contentType: "application/json; charset=utf-8",
        url: "stats.aspx/getData",
        type: "POST",
        dataSrc: 'd',
        error: function (xhr) {
            console.log(xhr);
        }
    }
});

EDIT: Actually i've changed my method of how i create the DataTable, now i get no errors the table is created and even the pagination is created but the data is not shown inside the cells...

function loadTable(data) {
    $.ajax({
        type: "POST",
        url: "stats.aspx/getData",
        data: JSON.stringify({ data: data }),
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            $('#table').DataTable({
                responsive: true,
                destroy: true,
                aaData: JSON.parse(result.d),
                lengthChange: false,
                pageLength: 5,
                info: false,
                dom: '<t><p>',
                pagingType: "numbers",
                "columnDefs": [{
                    "defaultContent": "-",
                    "targets": "_all"
                }],
                language: {
                    search: "Cerca:",
                    paginate: {
                        first: "Inizio",
                        last: "Fine",
                        next: "Successivo",
                        previous: "Precedente"
                    },
                }
            });
        },
        error: function (xhr) {
            alert(xhr.status);
        }
    });

}

NiceToMytyuk · Accepted Answer · 2019-07-19 10:01:45Z

1

Solved by using data instead aaData here is the working code:

$.ajax({
    type: "POST",
    url: "stats.aspx/getData",
    data: JSON.stringify({ data: data }),
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    success: function (result) {
        $('#table').DataTable({
            responsive: true,
            destroy: true,
            data: JSON.parse(result.d),
            lengthChange: false,
            pageLength: 5,
            info: false,
            dom: '<t><p>',
            pagingType: "numbers",
            columns: [
                { data: 'DESOP_LOG' },
                { data: 'OPERAZIONE_LOG' },
                { data: 'FORM_LOG' },
                { data: 'CODART_LOG', "defaultContent": ""}
            ]
        });
    },
    error: function (xhr) {
        alert(xhr.status);
    }
});

answered Jul 19, 2019 at 10:01

NiceToMytyuk

4,49710 gold badges58 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to build a DataTable from AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related