Ajax datatables.net table will not load-CodePudding

v1.10 Datatables.net table will not load using ajax - examples at datatables.net did not help, nor did the documentation. The table displays, but says "No data available in table". I don't think it matters, but this is for an old MVC5 app that I'm doing a little maintenance on. I'm hoping someone can spot what's wrong?

HTML Table definition:

<table id="bob">
    <thead>
        <tr>
            <th>License Type</th>
            <th>Active</th>
            <th>Pending</th>
            <th>Other</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>License Type</th>
            <th>Active</th>
            <th>Pending</th>
            <th>Other</th>
        </tr>
    </tfoot>
</table>

JavaScript Init:

$(function () {
    var url = '@Url.Action("LicenseCountsReport", "Letters")';
    $('#bob').DataTable({
        ajax: {
            dataSrc: '',
            url: url,
            columns: [
                { data: 'licensetype' },
                { data: 'activecount' },
                { data: 'pendingcount' },
                { data: 'othercount' }
            ]
        }
    });
});

Data Method & Associated Classes:

public class LicenseCountReportItem
{
    public string licensetype { get; set; }
    public string activecount { get; set; }
    public string pendingcount { get; set; }
    public string othercount { get; set; }
}

private class JsonDataResult
{
    public List<LicenseCountReportItem> data { get; set; }
}

[HttpGet]
public JsonResult LicenseCountsReport()
{
    JsonDataResult reportData = new JsonDataResult
    {
        data = new List<LicenseCountReportItem>()
    };

    try
    {
        List<LicenseCountReportItem> items = _lr.GetLicenseCountsReport();

        if (items != null && items.Count > 0)
        {
            reportData = new JsonDataResult
            {
                data = items
            };
            return Json(reportData, JsonRequestBehavior.AllowGet);
        }
        return Json(reportData, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
        Logger.Log(ex, LogLevel.ERROR);

        return Json(reportData, JsonRequestBehavior.AllowGet);
    }
}

JSON Response (formatted), an array of objects:

{
    "data":[
        {
            "licensetype":"Commercial Apprentice Applicators",
            "activecount":"130",
            "pendingcount":"22",
            "othercount":"99"
        },
        {
            "licensetype":"Professional Applicators",
            "activecount":"4239",
            "pendingcount":"3314",
            "othercount":"55147"
        }
    ]
}

CodePudding user response：

There are 2 problems I can see:

1 - The first problem: You have used the DataTables ajax option: dataSrc: ''. Instead, you should remove this option (or use its default value of data, as follows: dataSrc: 'data').

If you use dataSrc: '', you are telling DataTables that your JSON is an unnamed array - something like this:

[
    {
        "licensetype": "Commercial Apprentice Applicators",
        "activecount": "130",
        "pendingcount": "22",
        "othercount": "99"
    },
    {
        "licensetype": "Professional Applicators",
        "activecount": "4239",
        "pendingcount": "3314",
        "othercount": "55147"
    }
]

But that is not how your JSON is structured. Your array is nested inside a JSON object: { "data": [ ... ] }.

2 - The second problem: You have placed your columns option inside the ajax option. But the columns option needs to be at the same level as the ajax option:

$('#bob').DataTable({
    ajax: {
        url: url,
    },
    columns: [
        { data: 'licensetype' },
        { data: 'activecount' },
        { data: 'pendingcount' },
        { data: 'othercount' }
    ]       
});

The columns option is independent of the ajax option.