DataTables - Requested unknown parameter on 3 of 7 Columns - datatables-1.10

Question

I'm at my wits end with this issue and hoping someone can help. I've perused all the other answers and none of the solutions offered are resolving my problem. The following is the JSON string:
{
Description="XT86 EXTENDED WARRANTY (3 YEARS)",
Id=88,
InternalPartNumber="000-063",
ManufacturerPartNumber="000-063",
SellPrice=350.00,
Cost=280.00,
Category="Maintenance"
}
The following is my JS:
$('#products').dataTable({
serverSide: true,
ajax: {
url: "/Product/LoadProducts",
type: "POST",
datatype: "json"
},
columns: [
{ data: "id" },
{ data: "internalpartnumber" },
{ data: "manufacturerpartnumber" },
{ data: "description" },
{ data: "category" },
{ data: "sellprice" },
{ data: "cost" }
]
});
The HTML is as follows:
<div class="shadow-lg p-1 mb-1 bg-secondary rounded">
<table class="table table-hover table-striped table-bordered table-sm w-100" id="products">
<thead class="bg-primary">
<tr style="cursor:pointer;" class="text-light">
<th scope="col">Id</th>
<th scope="col">DCT Part #</th>
<th scope="col">MFG Part #</th>
<th scope="col">Description</th>
<th scope="col">Category</th>
<th scope="col">Sell Price</th>
<th scope="col">Cost</th>
</tr>
</thead>
</table>
</div>
The result is the following:
DataTables warning: table id=products - Requested unknown parameter
'internalpartnumber' for row 0, column 1. For more information about
this error, please see http://datatables.net/tn/4
Clicking OK on the error does load the table but 3 columns are missing data.
I've tried removing { data: "internalpartnumber" } but then I get the error on ManufacturingPartNumber. When I remove { data: "manufacturerpartnumber" } I get the error on SellPrice. When I remove { data: "sellprice" } I get no errors!
When I view the data from Visual Studio, the order the data is in is the same as I have it for each "index" order however when you expand each row index, it is being sorted.
Any help that can be provided would be much appreciated.
The LoadProducts method is as follows:
var results = (from p in _productRepository.GetAllActive
select new
{
p.Id,
p.InternalPartNumber,
p.ManufacturerPartNumber,
p.Description,
Category = p.ProductCategory.Display,
p.SellPrice,
p.Cost
});

Answer 1

Your Columns in your DataTable are not set up in an order as your data is
HTML
<table id="products" class="display" style="width:100%">
<thead>
<tr>
<th>Description</th>
<th>Id</th>
<th>InternalPartNumber</th>
<th>ManufacturerPartNumber</th>
<th>SellPrice</th>
<th>Cost</th>
<th>Category</th>
</tr>
</thead>
</table>
Jquery
var ret = {
data: [
{
Description: "XT86 EXTENDED WARRANTY (3 YEARS)",
Id: 88,
InternalPartNumber: "000-063",
ManufacturerPartNumber: "000-063",
SellPrice: 350.00,
Cost: 280.00,
Category: "Maintenance"
}
]
};
$('#products').dataTable({
data: ret.data,
columns: [
{ data: "Description" },
{ data: "Id" },
{ data: "InternalPartNumber" },
{ data: "ManufacturerPartNumber" },
{ data: "SellPrice" },
{ data: "Cost" },
{ data: "Category" }
]
});

Answer 2

I was finally able to figure this out. In Chrome, I selected the Network Option under the developer tools to examine the payload. What I noticed is that the first letter of the columns was lowercased which was different than what Visual Studio was showing.
I updated my columns definitions to the following:
columns: [
{ data: "id", name: "id", autoWidth: true },
{ data: "internalPartNumber", name: "internalPartNumber", autoWidth: true },
{ data: "manufacturerPartNumber", name: "manufacturerPartNumber", autoWidth: true },
{ data: "description", name: "description", autoWidth: true },
{ data: "category", name: "category", autoWidth: true },
{ data: "sellPrice", render: $.fn.dataTable.render.number(',', '.', 2, '$') },
{ data: 'cost', render: $.fn.dataTable.render.number(',', '.', 2, '$') }
]
and now everything works.