jQuery Datatables Requested unknown parameter '0' for row '0' column '0'

Question

I have the flat Json string produced by my aspx webpage..

[{"UserName":"ABENS"},{"UserName":"AILPAL"},{"UserName":"ANDREW.GUILLERMO"}.....(so on so forth)]

I have declared the following html..

            <table id="tblUserAccountsManagement" class="display" cellspacing="0">                    
                         <thead>
                            <tr>
                                <th>UserName</th>

                            </tr>
                        </thead>                                

                    </table>

I have the following Jquery...

  $(document).ready(function () {

        var tbl = $('#tblUserAccountsManagement').DataTable({

            "ajax": {

                "url": "AccountsManagementJSON.aspx",
                "dataSrc": ""

            },

            "columns": [

                { "data": 'UserName' }

            ],
            autofill: true,
            select: true,
            responsive: true,
            buttons: true,
            length: 10,

        });
    });

Why does it still output the error?

Requested unknown parameter '0' for row '0' column '0'

I've read everything followed every troubleshoot there is, made sure that html and jQuery definition are intact.. why doesn't it still work?

What I don't understand is that I've tried this before here and it worked. I only had to add dataSrc: "" and that did the trick. I followed my previous example to the letter and now it does not work.

What's weird is that it does show the number of rows (39 rows like in the JSON) But it won't show content. Why is that?

Answer 1

I have resolved the problem: I have used aoColumns and mData with this setup (Webforms with MasterPages).

the following now works :

 $(document).ready(function () {

    var tbl = $('#tblUserAccountsManagement').DataTable({

        "ajax": {

            "url": "AccountsManagementJSON.aspx",
            "dataSrc": ""

        },

        aoColumns: [

            { mData: 'UserName' }

        ],
        autofill: true,
        select: true,
        responsive: true,
        buttons: true,
        length: 10,

    });
});