ASPNETZERO - Datatables issues

I have upgraded my solution to the latest versions of ASPNETZERO V4.x. I have both templates MVC5 and .NET Core versions. I took the upgrade as I very much prefer to use DataTables plugin and had already implemented across all my code in the existing version of my ASPNETZERO solution. It appears that the ASPNETZERO has implemented a "custom" version of DataTables. As now my working Datatables from before my upgrade are breaking. I had copied the editable datatables code supplied as examples in the Metronic source code into my ASPNETZERO solution and it was working perfectly. Now after the V4.X upgrade it has broken this code. When I look at the scripts for DataTables usage in the downloaded solution for pages like Tenants, Roles and Users, I see options being applied to the Datatables initialization that do not exist in the Datatables documentation. One example, the initialization property "listAction" is not found in the Datatables.net documentation.

        var dataTable = _$usersTable.DataTable({
        listAction: {
            ajaxFunction: _userService.getUsers,
            inputFilter: function () {
                return {
                    filter: $('#UsersTableFilter').val(),
                    permission: $("#PermissionSelectionCombo").val(),
                    role: $("#RoleSelectionCombo").val()
                };
            }
        },

The above leads me to believe this is a "custom" version of Datatables by the ASPNETZERO team. I do not see any documentation on how to use this "custom" version and the documentation from the DataTables.net site does not match the code I see in the provided solution. Has anyone else run into any such issues? Is there documentation on this "Custom" datatbles implementation?

@Alper When I said hard-coded I meant something like this:

        <table class="table table-bordered table-striped table-hover" id="tblRel">
        <thead>
            <tr>
                <td>Version</td>
                <td>Publish Date MST</td>
                <td>Publish Date <b>GMT</b></td>
                <td>Release notes</td>
            </tr>
        </thead>
        <tbody>
            <tr class="danger">
                <td>1.0.0.5</td>
                <td></td>
                <td></td>
                <td>
                    <ul>
                        <li>Updated tooltip for resident funding icon on resident index page.</li>
                        <li>Contacts - Added additional column for contact name and emergency contact flag</li>
                        <li>HR - Jobcode - Band level is no longer a required field</li>
                    </ul>
                </td>
            </tr>
            <tr>
        </tbody>
    </table>

And something like this:

<table class="table table-striped table-hover table-bordered" id="Contacts">
                        <thead>
                            <tr>
                                <th>@L("ContactName")</th>
                                <th>@L("ContactType")</th>
                                <th>@L("ContactCategory")</th>
                                <th>@L("Email")</th>
                                <th>@L("Phone")</th>
                                <th>@L("DefaultYN")</th>
                                <th>@L("EmergencyYN")</th>
                                <th>@L("Edit")</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (Model.Company.Contacts.Count != 0)
                            {
                                foreach (var ctc in Model.Company.Contacts)
                                {
                                    <tr>
                                        <td>@(ctc.Contact.ContactName)</td>
                                        <td>@(ctc.Contact.TypeName)</td>
                                        <td>@(ctc.Contact.CategoryName)</td>
                                        <td>@(ctc.Contact.Email)</td>
                                        <td>@(ctc.Contact.Phone)</td>
                                        @if (ctc.Contact.DefaultYN)
                                        {
                                            <td>@L("Yes")</td>
                                        }
                                        else
                                        {
                                            <td>@L("No")</td>
                                        }
                                        @if (ctc.Contact.EmergencyContactYN)
                                        {
                                            <td>@L("Yes")</td>
                                        }
                                        else
                                        {
                                            <td>@L("No")</td>
                                        }
                                        <td>
                                            <a class="edit btn btn-xs btn-primary" href="javascript:;">@L("Edit") </a>
                                        </td>
                                    </tr>
                                }
                            }
                        </tbody>
                    </table>

In the above two examples the table data is not fetched by the Datatables code. The simple initialization that I was using on these tables is no longer working in V4.X.

Solution

I can confirm that commenting out all of AspNetZero's custom changes to DataTables will allow a static HTML table to render correctly. With the changes in place the Loading... screen gets stuck.

While I deeply enjoy AspNetZero, this is the second time I found a custom change to a library that broke it's default behavior which led to hours and hours of troubleshooting (the other change was to jquery.validation where the default .Validate() was overridden so that it no longer validated on form submit).

I don't mind the changes-- if they are documented.

Specifically: datatable.ajax.js breaks the default behavior of datatables. It assigns an ajax function which then prevents the default static HTML behavior from working. To fix in your code without having to remove the AspNetZero default files... do the following:

$('#example').dataTable( {
  ajax: null
});