ASP.NET MVC5 and DataTables for a beginner: what goes where?

JDRay_DTNA

I'm just starting an adventure into ASP.NET MVC5, armed with web development skills firmly rooted in 1995. After some effort, the basic CRUD application is working, and I'm proceeding to dress it up some. The functionality that DataTables delivers seems to be a perfect fit.

What I understand about JavaScript could fit in a small comment block, but I can follow well formed instructions. So when I found the documentation that said, "just add these three include lines and this one line of JS, and you're off and running," I thought it would be straightforward. I did what I thought the instructions said, and nothing changed. Doing more research, I found someone's project that creates bindings for MVC5 and DataTables 1.10, but the instructions are sparse ("easy" is only easy if you understand what they're telling you to do).

Beginning with the DataTables instructions ("just add these three lines..."), here's what I have:

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
  
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
</script>

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="products" >
    <tr>
        <th> @Html.DisplayName("Code")</th>
        <th>@Html.DisplayNameFor(model => model.Name)</th>
        <th>@Html.DisplayNameFor(model => model.Category)</th>
        <th>@Html.DisplayName("Active")</th>
        <th>@Html.DisplayName("Published")</th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>@Html.DisplayFor(modelItem => item.ProductCode)</td>
        <td>@Html.DisplayFor(modelItem => item.Name)</td>
        <td>@Html.DisplayFor(modelItem => item.Category)</td>
        <td>@Html.DisplayFor(modelItem => item.Active.Value)</td>
        <td>@Html.DisplayFor(modelItem => item.Published.Value)</td>
        <td>@Html.ActionLink("Details", "Details", new { id=item.ID })</td>
    </tr>
}
</table>

Theoretically, all I need to add is one line:

$(document).ready( function () {
    $('#products').DataTable();
} );

What's missing (here's where my rudimentary understanding comes in) is WHERE to add it. I've tried several places, and no change to the table is made. The first place I tried was within the script tag for the third block:

<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
$(document).ready( function () {
    $('#products').DataTable();
} );</script>

Is that the right place? Am I identifying the target table correctly? Do I need to figure out how to implement the code found at https://github.com/ALMMa/datatables.mvc ? Should I abandon all hope until I've mastered JavaScript?

Thanks for whatever help you can give me.

Cheers.

JD

JDRay_DTNA

Per the request for a JSFiddle, here: http://jsfiddle.net/JDRay/dLjsgmyq/

allan

Hi,

It looks like you are missing the thead and tbody elements. See the HTML requirements.

Also:

The first place I tried was within the script tag for the third block:

You would think that would work! But is doesn't... At least not consistently - see John Resig's (author of jQuery) investigation on the topic. You need to use a script tab for the loading of the script and another for the execution of the function.

Allan

JDRay_DTNA

I added the thead and tbody tags (thank you for that), but am still getting this error:

Unhandled exception at line 42, column 9 in http://localhost:49961/

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dataTable'

I've tried both dataTable() and DataTable(), with the same results. Here's my current code:

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#products').DataTable();
    });
</script>
<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="products">
    <thead>
        <tr>
            <th>@Html.DisplayName("Code")</th>
            <th>@Html.DisplayNameFor(model => model.Name)</th>
            <th>@Html.DisplayNameFor(model => model.Category)</th>
            <th>@Html.DisplayName("Active")</th>
            <th>@Html.DisplayName("Published")</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.ProductCode)</td>
                <td>@Html.DisplayFor(modelItem => item.Name)</td>
                <td>@Html.DisplayFor(modelItem => item.Category)</td>
                <td>@Html.DisplayFor(modelItem => item.Active.Value)</td>
                <td>@Html.DisplayFor(modelItem => item.Published.Value)</td>
                <td>@Html.ActionLink("Details", "Details", new { id = item.ID })</td>
            </tr>
        }
    </tbody>
</table>

JDRay_DTNA

Per a recommendation from StackOverflow, I've made a few other changes with the same results (Object doesn't support property or method). Here's the current code:

<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="products">
    <thead>
        <tr>
            <th> @Html.DisplayName("Code")</th>
            <th>@Html.DisplayNameFor(model => model.Name)</th>
            <th>@Html.DisplayNameFor(model => model.Category)</th>
            <th>@Html.DisplayName("Active")</th>
            <th>@Html.DisplayName("Published")</th>
            <th>Details</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model) 
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.ProductCode)</td>
                <td>@Html.DisplayFor(modelItem => item.Name)</td>
                <td>@Html.DisplayFor(modelItem => item.Category)</td>
                <td>@Html.DisplayFor(modelItem => item.Active.Value)</td>
                <td>@Html.DisplayFor(modelItem => item.Published.Value)</td>
                <td>@Html.ActionLink("Details", "Details", new { id=item.ID })</td>
           </tr>
        }
     </tbody>
</table>

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
</script>

<script type="text/javascript" charset="utf8">
    $(document).ready( function () {
        $('#products').DataTable();
    } );
</script>

JDRay_DTNA

After a lot of help from here and StackOverflow, I've arrived at the conclusion that it's not the implementation of the code itself, which works fine in JSFiddle, but that something else is awry. I'll pursue implementation of the ALMMa binding project to see if that helps. In the meantime, here's a working Fiddle: http://jsfiddle.net/JDRay/dLjsgmyq/

allan

There were a few issues with the fiddle linked to above:

1. Syntax error in the initialisation code
2. Missing thead and tbody tags
3. Resources not being imported

I've updated the fiddle here just for reference should you find it useful: http://jsfiddle.net/dLjsgmyq/1/ .

Allan

JDRay_DTNA

In the fiddle you link to, I don't see any initialization code at all in any of the three panes. FWIW, I had gotten my table working in JSFiddle yesterday (http://jsfiddle.net/JDRay/dLjsgmyq/), but in VS it's still throwing an error saying that the object doesn't contain a method for DataTables(), which leads me to believe that, as you suggest, there's an error in the initialization code. But, as I mentioned, I don't see it in your fiddle. ???

tangerine

In the fiddle you link to, I don't see any initialization code at all in any of the three panes.

You don't see this?

$(document).ready( function () {
    $('#products').DataTable();
});

JDRay_DTNA

That part I see, however it's identical to what I have that's failing. What I don't see are these tags:

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
</script>*@

Through research, I'm finding that copying locally and adding these files through BundleConfig.cs is recommended, though it's not yet working. Progress, though, I think.

JDRay_DTNA

I got it working. I've documented the final solution on StackOverflow:

http://stackoverflow.com/questions/28442960/asp-net-mvc5-and-datatables-for-a-beginner-what-goes-where