ASP.NET MVC & Ajax json Datatables errors - json error, cells not displaying data

Question

This may be a duplicate but I've tried everything I can find on stack exchange and datatables.net forums. I can't get it to work at all.

I have var listOfFiles which is a list of the following model (List<AudioModel>):

public class AudioModel
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Artist { get; set; }
    public string Album { get; set; }
    public string Duration { get; set; }
    public bool Select { get; set; }
    public string FilePath { get; set; }
}

Controller:

[HttpGet]
public ActionResult GetAudio()
{
    var listOfFiles = asa.GetAudioFilesFromServer(serverpath);
    return Json(new { data = listOfFiles }, JsonRequestBehavior.AllowGet);
}

Console output from chrome -

View -

    <table class="display compact table table-striped table-hover table-condensed" id="audiotable">
        <thead>
            <tr>
                <th>Id</th>
                <th>Title</th>
                <th>Artist</th>
                <th>Album</th>
                <th>Duration</th>
                <th>Select</th>
                <th>FilePath</th>
            </tr>
        </thead>
    </table>


$(document).ready(function () {

    var jsonData = $.ajax({
        type: "GET",
        contentType: "json",
        url: "@Url.Action("GetAudio", "Music")"
    })

    // screenshot of this above
    console.log(jsonData);

    $("#audiotable").DataTable({
        "ajax": {
            "type": "GET",
            "contentType": "json",
            "data": jsonData,
            "columns": [
                { "data": "Id" },
                { "data": "Title" },
                { "data": "Artist" },
                { "data": "Album" },
                { "data": "Duration" },
                { "data": "Select" },
                { "data": "FilePath" }
            ]
        }
    });
});

with the above code I get DataTables error 1. I've tried jsonData.responseJSON

I get DataTables error 4 when I serialize json but I understand that with the above code I need a json array, not a string.

I've closely followed the troubleshooting for both errors. my json looks perfect, is anyone able to point me in the right direction? I can't figure out what I'm doing wrong!

Thanks in advance.

please try this, change return Json(new { data = listOfFiles }, JsonRequestBehavior.AllowGet); to return Json( listOfFiles , JsonRequestBehavior.AllowGet); — Ashutosh Kushawaha
– Ashutosh Kushawaha, Commented Dec 6, 2019 at 4:13

jomsk1e · Accepted Answer · 2019-12-06 05:51:33Z

0

What you are doing is getting your jsondata using ajax then passing the data to ajax call of datatables init. That's not going to work. You don't need your ajax call outside of datatables.

Try this:

$("#audiotable").DataTable({
    "ajax": {
        url: "@Url.Action("GetAudio", "Music")"
        type: "GET"
    }, 

    "columns": [
            { "data": "Id" },
            { "data": "Title" },
            { "data": "Artist" },
            { "data": "Album" },
            { "data": "Duration" },
            { "data": "Select" },
            { "data": "FilePath" }
        ]
});

Update your action to this:

[HttpGet]
public ActionResult GetAudio()
{
    var listOfFiles = asa.GetAudioFilesFromServer(serverpath);
    return Json(listOfFiles, JsonRequestBehavior.AllowGet);
}

edited Dec 6, 2019 at 5:51

answered Dec 6, 2019 at 1:05

jomsk1e

3,6457 gold badges37 silver badges61 bronze badges

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

1 Comment

clomas Over a year ago

Thanks for getting back to me, I have tried that previously and I've attempted again I get an empty table with no error

Hien Nguyen · Accepted Answer · 2019-12-06 01:07:56Z

0

You can move AJAX call inside init DataTable like below

$(document).ready(function () {
            $('#audiotable').DataTable({
                "ajax": "/Music/GetAudio",
                "columns": [
                    { "data": "Title" },
                    { "data": "Artist" },
                    { "data": "Album" },
                    { "data": "Duration" }
                ]
            });
    });

answered Dec 6, 2019 at 1:07

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC & Ajax json Datatables errors - json error, cells not displaying data

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related