ASP.NET Core MVC and DataTables Error

ASP.NET Core MVC and DataTables Error

arosnerarosner Posts: 24Questions: 5Answers: 1
edited December 2023 in Free community support

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

  • kthorngrenkthorngren Posts: 19,868Questions: 26Answers: 4,686

    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:

    Error: Stray end tag main.
    
    From line 28, column 9; to line 28, column 15
    
    >↩        </main>↩    <
    
    Error: Stray end tag div.
    
    From line 29, column 5; to line 29, column 10
    
    main>↩    </div>↩    <
    

    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?

    at bindDatatable (https://localhost:7103/DatabaseTables/ViewDatabaseTable/fms.HDCTREASPF:85:18)
    at HTMLDocument.<anonymous> (https://localhost:7103/DatabaseTables/ViewDatabaseTable/fms.HDCTREASPF:80:13) undefined
    

    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

  • kthorngrenkthorngren Posts: 19,868Questions: 26Answers: 4,686

    What does aspnetcore-browser-refresh.js do? Could it have an affect on Datatables and the web page?

    Kevin

  • arosnerarosner Posts: 24Questions: 5Answers: 1
    Answer ✓

    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.

  • allanallan Posts: 60,929Questions: 1Answers: 9,932 Site admin

    Nice one - thanks for the update. Glad to hear you got it sorted out.

    Allan

Sign In or Register to comment.