How to display data on jQuery Datatables in Asp.Net Core MVC

Question

I am new to jQuery Datatables using AJAX in Asp.Net MVC 6.I have enclosed my code in the view as well as in the controller.

View:

<div>
<div style="padding-top: 20px; padding-bottom:20px">

		<button class="btn btn-lg btn-primary" onclick="javascript:runReport();">Run Report</button>

</div>

<div>

    <table class="table table-bordered table-striped" id="riskReport">

        <thead class="bg-dark text-white">

            <tr>

                <th>CustomerNumber</th>

                <th>CustomerStatus</th>

                <th>StartDate</th>

            </tr>

        </thead>

        <tbody>

        </tbody>

    </table>

</div>
</div>
@section Scripts {
@{

                    <partial name="_ValidationScriptsPartial" />

                    <partial name="_DataTableCDN" />

}

<script>

    

    function runReport() {

        

        var reportData;

        

        var dataTableOptions = {

            "paging": true,

            "lengthChange": false,

            "searching": false,

            "ordering": true,

            "info": true,

            "autoWidth": false,

            "responsive": true,

            "columnDefs": "",

            "ajax": {

                url: "/eGrantsReports/ProcessReport",

                type: "POST",

                data: reportData,

                // "datatype": "json",

                "error": function (e) {

                    alert(e)

                },

                

                "dataSrc": function (d) {

                    alert(JSON.stringify(d))

                    // return JSON.stringify(d);

                    return d;

                },

                "columns":[

                    { "data": "customerNumber", "name": "CustomerNumber", "autoWidth": true },

                    { "data": "customerStatus", "name": "CustomerStatus", "autoWidth": true },

                    { "data": "startDate", "name": "StartDate", "autoWidth": true }

                ]

                

            }

        }

        

        reportData = $('#reportForm').serializeArray();

        var myDataTable = $('#riskReport').DataTable(dataTableOptions);

    }

            

</script>

Controller:

[HttpPost]
public async Task<JsonResult> ProcessReport(ReportsConfigurationVM reportsConfigurationVM)
{
List<RiskByYearTest> myList = new List<RiskByYearTest>();
RiskByYearTest r1 = new RiskByYearTest();
r1.CustomerNumber = "4549601";
r1.CustomerStatus = "Active";
r1.StartYear = "2022";
RiskByYearTest r2 = new RiskByYearTest();
r2.CustomerNumber = "4549602";
r2.CustomerStatus = "Closed";
r2.StartYear = "2023";
myList.Add(r1);
myList.Add(r2);
var result = Json(myList);
return result;
}

The controller returns the following two rows of data.

[{"customerNumber":"4549601","customerStatus":"Active","startYear":"2022"},{"customerNumber":"4549602","customerStatus":"Closed","startYear":"2023"}]

However, I am getting this popup error message and the data is not displayed on the grid. The empty grid says, "No data available in table".

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

Answer 1

Hi @Sherpa,

Be sure move columns outside the ajax function and the property name is StartYear instead of StartDate:

"columns": [
    { "data": "customerNumber", "name": "CustomerNumber", "autoWidth": true },
    { "data": "customerStatus", "name": "CustomerStatus", "autoWidth": true },
    { "data": "startYear", "name": "StartYear", "autoWidth": true }
]

The whole js code:

function runReport() {     
    var reportData;
    var dataTableOptions = {
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
        "columnDefs": "",
        "ajax": {
            url: "/eGrantsReports/ProcessReport",
            type: "POST",
            data: reportData,
            "error": function (e) {
                alert(e)
            },
            "dataSrc": function (d) {
                console.log(d);
                return d;
            }                
        },
        "columns": [
            { "data": "customerNumber", "name": "CustomerNumber", "autoWidth": true },
            { "data": "customerStatus", "name": "CustomerStatus", "autoWidth": true },
            { "data": "startYear", "name": "StartYear", "autoWidth": true }
        ]
    }
    reportData = $('#reportForm').serializeArray();
    var myDataTable = $('#riskReport').DataTable(dataTableOptions);
}

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Rena

Answer 2

your response json is not the correct format. you can fix server side, or remap client side:

                "dataSrc": function (d) {
                    return {data: d};
                },