Valid JSON displaying as NULL in columns

pjdiii

DataTables is great and I have it working 100% on a MVC 6 generated page replacing the standard scaffold pages.

BACKGROUND: Working on a custom MVC 6 / ASPNET 5 page that's using jquery autocomplete search box. The query returned from the search will be used to populate DataTables passing the search result as a custom parameter.

Everything is communicating and I'm returning valid JSON per JSONLint:

I receive the dreaded: "DataTables warning: table id=SearchTable - Requested unknown parameter '0' for row 0, column 0. for more information about this error, please see http://datatables.net/tn/4" The table is redrawn with all columns containing null values. The counts are displaying properly, paging seems to work fine.

Seems all pretty textbook to me but I'm not seeing where I've gone wrong. Any assistance would be greatly appreciated.

Returned JSON

{
    "sEcho": "1",
    "iTotalRecords": 1,
    "iTotalDisplayRecords": 1,
    "aaData": [{
        "DT_RowId": "28",
        "LastName": "Doe",
        "FirstName": "John P",
        "Location": "123 Main Street",
        "ProgramArea": "Technology Services",
        "Title": "Database Administrator",
        "OfficePhone": "(800) 555-1212",
        "OfficeMobile": "N/A",
        "PersonalPhone": "N/A"
    }]
}

HTML
<code>
<table id="SearchTable" class="table table-striped table-bordered" >
<thead>
<tr>
<th>
<label asp-for="@Model.EmployeeProfile.LastName"></label>
</th>
<th>
<label asp-for="@Model.EmployeeProfile.FirstName"></label>
</th>
<th>
<label asp-for="@Model.EmployeeProfile.OfficePhone"></label>
</th>
<th>
<label asp-for="@Model.EmployeeProfile.OfficeMobile"></label>
</th>
<th>
<label asp-for="@Model.EmployeeProfile.PersonalMobile"></label>
</th>
<th>
<label asp-for="@Model.EmployeeProfile.ProgramArea.ProgramAreaName"></label>
</th>
<th>
<label asp-for="@Model.EmployeeProfile.Location.AddressName"></label>
</th>
<th>
<label asp-for="@Model.EmployeeProfile.Title"></label>
</th>
</tr>
</thead>
<tbody></tbody>
</table>
</code>

Javascript function to populate DataTable

           function GetDetails(search)
            {
              if (search.length == 0)
                    search = $("#SearchString").val();
                                                            
                $("#SearchTable").DataTable({
                    destroy: true,
                    bServerSide: true,
                    bProcessing: true,
                    deferRender: true,
                    autoWidth: false,
                    dom: "ltip",
                    sAjaxSource: "/Home/Search",
                    "fnServerParams": function(aoData)
                        {
                            aoData.push({ "name": "SearchString", "value": search });
                        }

                    });
            }

allan

You are are using objects for your data source objects, so you need to tell DataTables which property it should use for each column. You do that with columns.data. See also the manual.

Allan

pjdiii

thank you, changed my code to the following and it worked perfectly. Now just need to handle sorting and paging :)
<code>
function GetDetails(search)
{
if (search.length == 0)
search = $("#SearchString").val();

            $("#SearchTable").DataTable({
                destroy: true,
                bServerSide: true,
                bProcessing: true,
                deferRender: true,
                autoWidth: false,
                dom: "ltip",
                sAjaxSource: "/Home/Search",
                "fnServerParams": function(aoData)
                    {
                        aoData.push({ "name": "SearchString", "value": search });
                },
                columns: [
                    { data: "LastName" },
                    { data: "FirstName" },
                    { data: "OfficePhone" },
                    { data: "OfficeMobile" },
                    { data: "PersonalPhone" },
                    { data: "ProgramArea" },
                    { data: "Location" },
                    { data: "Title" }                        
                ]
                });
        }

<./code>