Does standard vanilla jquery tables work with asp.net core?

lvsund

On the opening web page for your site, it says to add the reference links and the additional javascript for datatables. When I do that it renders the grid in terms of the colors , headings etc and alternate row shading. But does not show the search box, the dropdown for record numbers to display, or the pagination.

Havent nugetted anything- just using CDN references per instructions on jquery datables site-opening page.

Am I missing something?

bindrid

sounds like it. We need to see your code to see what is missing. ASP.Net core generated/renders code and html server side and sends it to the client. Jquery is a client side library so it just does not care if the page is rendered from aspx or html.

Now having said that, if you are generating tables on the server side, by default, thead and tfoot are not generated so you may need to take steps to ensure that is happening. There are examples of that on Stackoverflow

lvsund

here is my code- tables/grid gets rendered - but no search box rows to display or paging:

@model IEnumerable<ServeMeHRCore21.Models.ServiceRequests>

@{
ViewData["Title"] = "Index";
}

Service Requests

Create New

@using (Html.BeginForm())
{

<p>
    @Html.DropDownList("StatusType", "Select a Value")
</p>
<p>
    Find by Keyword or Phrase in Heading Or Description: @Html.TextBox("SearchString")
</p>
<p>
    <input type="submit" value="Search" />
</p>

}

Service Requests

@**@ @foreach (var item in Model) { }

@Html.DisplayNameFor(model => model.Id)	@Html.DisplayNameFor(model => model.RequestHeading)	@Html.DisplayNameFor(model => model.RequestorLastName)	@Html.DisplayNameFor(model => model.RequestorPhone)	@Html.DisplayNameFor(model => model.RequestorEmail)	@Html.DisplayNameFor(model => model.DateTimeSubmitted)
@Html.DisplayFor(modelItem => item.Id)	@Html.DisplayFor(modelItem => item.RequestHeading)	@Html.DisplayFor(modelItem => item.RequestorLastName)	@Html.DisplayFor(modelItem => item.RequestorPhone)	@Html.DisplayFor(modelItem => item.RequestorEmail)	@Html.DisplayFor(modelItem => item.DateTimeSubmitted)	Edit | Details | Delete | @Html.ActionLink("New Comment", "Create", "ServiceRequestNotes", new { ServiceRequest = item.Id, returncontroller = "ServiceRequests" }, null)

@*<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />*@


<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
@*<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />*@

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
@*<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>*@

<script type="text/javascript">
    $(document).ready(function () {

        $('#ServiceRequests-data-table').DataTable({
            "order": [[0, "desc"]]
        });

    });
</script>

lvsund

Sorry will try again with triple back ticks:

@model IEnumerable<ServeMeHRCore21.Models.ServiceRequests>

@{
    ViewData["Title"] = "Index";
}

<h2>Service Requests</h2>

<p>
    <a asp-action="Create">Create New</a>
</p>

@using (Html.BeginForm())
{

    <p>
        @Html.DropDownList("StatusType", "Select a Value")
    </p>
    <p>
        Find by Keyword or Phrase in Heading Or Description: @Html.TextBox("SearchString")
    </p>
    <p>
        <input type="submit" value="Search" />
    </p>

}





<div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary list-panel" id="list-panel">
            <div class="panel-heading list-panel-heading">
                <h1 class="panel-title list-panel-title">Service Requests</h1>
            </div>
            <div class="panel-body">
                <table id="ServiceRequests-data-table"
                       class="table table-striped table-bordered"
                       style="width:100%">
                    @*<table class="table">*@
                    <thead>
                        <tr>
                            <th>
                                @Html.DisplayNameFor(model => model.Id)
                            </th>

                            <th>
                                @Html.DisplayNameFor(model => model.RequestHeading)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.RequestorLastName)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.RequestorPhone)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.RequestorEmail)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.DateTimeSubmitted)
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Id)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.RequestHeading)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.RequestorLastName)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.RequestorPhone)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.RequestorEmail)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.DateTimeSubmitted)
                                </td>
                                <td>
                                    <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                                    <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                                    <a asp-action="Delete" asp-route-id="@item.Id">Delete</a> |
                                    @Html.ActionLink("New Comment", "Create", "ServiceRequestNotes", new { ServiceRequest = item.Id, returncontroller = "ServiceRequests" }, null)<br />
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>

            </div>
        </div>
    </div>
</div>





    @*<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />*@


    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
    @*<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />*@

    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    @*<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>*@

    <script type="text/javascript">
        $(document).ready(function () {

            $('#ServiceRequests-data-table').DataTable({
                "order": [[0, "desc"]]
            });

        });
    </script>

allan

That looks like it should work okay. Could you run the debugger on your page if you can't give us a link to the page please?

Allan

lvsund

still trying to figure out how to use datatables debugger, but when i just F12 the page in my broqwser, i get Uncaught ReferenceError: jQuery is not defined
at jquery.dataTables.min.js:5

allan

Unless you are using a module builder such as WebPack, all you should need to do is copy the code from the debugger page, paste it into the console, hit return and away it goes.

Allan

lvsund

that has usually been my experience, but the last few even fresh .net core apps i have created, doing the step mentioned on your site , displays the grid and colored heading bar, but just lists the records -no drop records to display, no search, and no pagination.

It does have something to do with above error. Another app i have same code and everything works- when i F12 no error message occurs and every displays as is should

lvsund

I copied over an equivalent cshtml from a version where it was working into current application and then it started working again- obviously something wrong with cshtml page. thanks

allan

It might be the load order of the Javascript then, or perhaps jQuery being loaded twice.

Either way, good to hear you have it working now.

Allan