ASP.NET Core MVC and DataTables Error
ASP.NET Core MVC and DataTables Error
arosner
Posts: 35Questions: 8Answers: 1
I am trying to integrate a DataTable into as ASP.NET Core MVC application.
Edge browser console error:
"jquery.min.js:2 jQuery.Deferred exception: Cannot read properties of undefined (reading 'style') TypeError: Cannot read properties of undefined (reading 'style')
at ee (https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js:4:40365)
at Jt (https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js:4:32965)
at t (https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js:4:8625)
at HTMLTableElement.<anonymous> (https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js:4:8711)
at Function.each (https://localhost:7103/lib/jquery/dist/jquery.min.js:2:2976)
at S.fn.init.each (https://localhost:7103/lib/jquery/dist/jquery.min.js:2:1454)
at S.fn.init.w [as dataTable] (https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js:4:3602)
at P.fn.DataTable (https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js:4:87120)
at bindDatatable (https://localhost:7103/DatabaseTables/ViewDatabaseTable/fms.HDCTREASPF:85:18)
at HTMLDocument.<anonymous> (https://localhost:7103/DatabaseTables/ViewDatabaseTable/fms.HDCTREASPF:80:13) undefined
The case does not involve a mismatch between the columns in the <th> column definition and the "Columns" variable.
View Page Source:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>View Database Table - WebTest</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css?v=AKvNjO3dCPPS0eSU1Ez8T2wI280i08yGycV9ndytL-c" />
<link rel="stylesheet" href="/WebTest.styles.css?v=xyOsBLRyNkG2GsoapL-7JIUeROtEv0oKfp7j0uBvUy0" />
<link href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
</head>
<body>
<table id="tableData" class="display" style="width:100%">
<thead>
<tr>
<th>REASONCD</th>
<th>REASONLBLS</th>
<th>BitTest</th>
<th>DateTimeTest</th>
<th>testdecimal</th>
<th>testfloat</th>
<th>testint</th>
<th>testmoney</th>
<th>testsmallint</th>
<th>testtinyint</th>
</tr>
</thead>
</table>
</main>
</div>
<footer b-3df587pwrj class="border-top footer text-muted">
</footer>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function () {
bindDatatable();
});
function bindDatatable() {
datatable = $('#tableData')
.DataTable({
"sAjaxSource": "/DatabaseTables/GetData",
"bServerSide": true,
"bProcessing": true,
"bSearchable": true,
"order": [[1, 'asc']],
"language": {
"emptyTable": "No record found.",
"processing":
'<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="color:#2a2b2b;"></i><span class="sr-only">Loading...</span> '
},
"columns": [
{
"data": "REASONCD",
"autoWidth": true,
"searchable": true,
},
{
"data": "REASONLBLS",
"autoWidth": true,
"searchable": true,
},
{
"data": "BitTest",
"autoWidth": true,
"searchable": true,
},
{
"data": "DateTimeTest",
"autoWidth": true,
"searchable": true,
},
{
"data": "testdecimal",
"autoWidth": true,
"searchable": true,
},
{
"data": "testfloat",
"autoWidth": true,
"searchable": true,
},
{
"data": "testint",
"autoWidth": true,
"searchable": true,
},
{
"data": "testmoney",
"autoWidth": true,
"searchable": true,
},
{
"data": "testsmallint",
"autoWidth": true,
"searchable": true,
},
{
"data": "testtinyint",
"autoWidth": true,
"searchable": true,
},
]
});
}
</script>
<script src="/_framework/aspnetcore-browser-refresh.js"></script></body>
</html>
Pertinent Controller functions are:
private List<HDCTREASPF> getHDCTREASPF()
{
List<HDCTREASPF> tableData = new List<HDCTREASPF>();
tableData.Add(new HDCTREASPF{
BitTest = true,
DateTimeTest = new DateTime(2023, 1, 1, 12, 11, 10),
REASONCD = "RCD1",
REASONLBLS = "RL1",
testdecimal = new decimal(15.5),
testfloat = 5.35f,
testint = 89,
testmoney = new decimal(11.89),
testsmallint = 34,
testtinyint = 5
});
tableData.Add(new HDCTREASPF{
BitTest = false,
DateTimeTest = new DateTime(2023, 10, 10, 2, 35, 27),
REASONCD = "RCD2",
REASONLBLS = "RL2",
testdecimal = new decimal(115.53),
testfloat = 5.276f,
testint = 251,
testmoney = new decimal(1111.89),
testsmallint = 35,
testtinyint = 6
});
return tableData;
}
public ActionResult LoadData()
{
try
{
var draw = HttpContext.Request.Query["draw"].FirstOrDefault();
var start = HttpContext.Request.Query["start"].FirstOrDefault();
var length = HttpContext.Request.Query["length"].FirstOrDefault();
var sortColumn = HttpContext.Request.Query["columns["
+ HttpContext.Request.Query["order[0][column]"].FirstOrDefault()
+ "][name]"].FirstOrDefault();
var sortColumnDir = HttpContext.Request.Query["order[0][dir]"].FirstOrDefault();
var searchValue = HttpContext.Request.Query["search[value]"].FirstOrDefault();
//Paging Size (10,20,50,100)
int pageSize = length != null ? Convert.ToInt32(length) : 0;
int skip = start != null ? Convert.ToInt32(start) : 0;
int recordsTotal = 0;
// Getting all Customer data
var dbTableData = getHDCTREASPF();
//Sorting
if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir)))
{
//dbTableData = dbTableData.OrderBy(sortColumn + " " + sortColumnDir);
}
//Search
if (!string.IsNullOrEmpty(searchValue))
{
//dbTableData = dbTableData.Where(m => m.REASONLBLS == searchValue);
}
//total number of rows count
recordsTotal = dbTableData.Count();
//Paging
var data = dbTableData.Skip(skip).Take(pageSize).ToList();
//Returning Json Data
return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data });
}
catch (Exception)
{
throw;
}
}
Model is:
public class HDCTREASPF
{
public string REASONCD { get; set; }
public string REASONLBLS { get; set; }
public bool? BitTest { get; set; }
public DateTime? DateTimeTest { get; set; }
public Decimal? testdecimal { get; set; }
public float? testfloat { get; set; }
public int? testint { get; set; }
public Decimal? testmoney { get; set; }
public Int16? testsmallint { get; set; }
public byte? testtinyint { get; set; }
}
Thank you!
This question has an accepted answers - jump to answer
Answers
Not sure if this is the issue but it doesn't seem like you have valid HTML. I copied the above into the W3C Validator and see a few errors, such as:
Other than that there doesn't seem to be any issues with the code you posted. Do you have any other Javascript code that runs outside of what you posted?
What are these two lines?
Can you post a link to your page or a test case replicating the issue so we can take a deeper look?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
What does
aspnetcore-browser-refresh.jsdo? Could it have an affect on Datatables and the web page?Kevin
As Kevin pointed out, there was an extra comma in the html. The datatables debugger was also helpful in finding the error. The debugger reported 11 columns, instead of 10. This prompted me to look in the right direction. Case closed.
Nice one - thanks for the update. Glad to hear you got it sorted out.
Allan