Not able to bind data to datatable in ASP.NET MVC

Question

Below is my code from view from my ASP.NET MVC project. I am using datatable to create a table. I am fetching data from a Web API. Data is being returned but while binding I get the error shown here. I tried deleting a lot of code which had buttons. Now I just have code for simply binding it.

datatables warning: table id=patients - ajax error. for more information about this error, please see http://datatables.net/tn/7

jQuery code :

$(document).ready(function () {
            debugger;
            var table = $("#patients").DataTable({
                
                ajax: {
                    
                    url: "/api/patients",
                    dataSrc: ""
                },
                columns: [
                    
                    {
                        data: "First_Name"
                    },
                    {
                        data: "phoneNumber",
                        render: function (data) {
                            debugger;
                            return data.toString().replace(
                              /(\d\d\d)(\d\d\d)(\d\d\d\d)/g, '$1-$2-$3');
                        }
                    },
                    {
                        data: "Address"
                    },
]
            });
 });

API code from controller:

public IHttpActionResult GetPatients()
{
    var patientDto = getdata();
    return Ok(patientDto);
}

public IEnumerable<Patient_Response> getdata()
{
    IEnumerable<Patient_Response> students = null;

    using (var client = new HttpClient())
    {
        client.DefaultRequestHeaders.Add("Authorization", "Bearer 0f6af107-6ad2-4665-ad24-f09402d50082");
        client.BaseAddress = new Uri("http://localhost:6600/api/");

        // HTTP GET
        var responseTask = client.GetAsync("patients");
        responseTask.Wait();

        var result = responseTask.Result;

        if (result.IsSuccessStatusCode)
        {
            var readTask = result.Content.ReadAsAsync<IList<Patient_Response>>();
            readTask.Wait();

            students = readTask.Result;
        }
        else //web api sent error response 
        {
            // log response status here..
            students = Enumerable.Empty<Patient_Response>();

            ModelState.AddModelError(string.Empty, "Server error. Please contact administrator.");
        }
    }

    return students;
}

What is wrong? I am not able to figure out.

Answer 1

Did you read the documentation: https://datatables.net/manual/tech-notes/7

This occurs when jQuery falls into its error callback handler (this callback built into DataTables), which will typically occur when the server responds with anything other than a 2xx HTTP status code.

That means that your call go the controller, failed to bring any data.

You can use the following code to see what went wrong:

$.fn.dataTable.ext.errMode = 'none';
 
$('#patients')
    .on( 'error.dt', function ( e, settings, techNote, message ) {
        alert( 'An error has been reported by DataTables: ', message );
    } )
    .DataTable();