ASP.NET MVC5 and DataTables for Beginners: What Happens?

Question

I asked this question on the DataTables forum, but in the interest of getting quick feedback, I am willing to tolerate some abuse, so I cross-post here.

---

I'm just starting an adventure in ASP.NET MVC5, armed with web development skills firmly rooted in 1995. After some effort, the main CRUD application works, and I continue to dress it. The functionality provided by DataTables seems to fit perfectly.

I understand that JavaScript can fit in a small block of comments, but I can follow well-formed instructions. So when I found the documentation that said: “Just add these three include lines and one JS line, and you are off and running,” I thought it would be simple. I did what I thought was said in the instructions, and nothing has changed. Having done more research, I found someone a project that creates bindings for MVC5 and DataTables 1.10, but the instructions are sparse ("easy" is simple, if you understand what they tell you to do).

Starting with the DataTables instructions ("just add these three lines ..."), here is 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 is missing (here, where my rudimentary understanding comes), WHERE to add it. I tried several places and there were no changes in the table. The first thing I tried was in 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 this a suitable place? Am I defining the target table correctly? I need to figure out how to implement the code found at https://github.com/ALMMa/datatables.mvc ? Do I have to give up all hope until I have mastered JavaScript?

Thanks for any help you can give me.

Greetings.

Jd

Answer 1

He works!!

So here is what I had to do:

In _Layout.cshtml I added the following to the head tag:

 <link href="~/Content/jquery.dataTables.css" rel="stylesheet" type="text/css"/> <link href="~/Content/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css" /> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" charset="utf8" src="~/Scripts/jquery.dataTables.js"></script> 

In BundleConfig.cs I added the following lines:

  bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-1.10.2.min.js")); bundles.Add(new ScriptBundle("~/bundles/datatables").Include( "~/Scripts/jquery.dataTables.js")); 

Finally, at the bottom of Index.cshtml there is a script call:

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

I suspect that the BundleConfig.cs bit is redundant, but it works, so I don't want to cheat trying to optimize it right now.

Greetings.

Jd

Answer 2

It was also hard for me to get DataTables in MVC5. I tried to use it in a standard index view that creates forests for the view model. I was able to build a small prototype, but not against the FOREACH generator for the table.
I gave a lot of different lines of JS and CSS code from the suggested examples, and also fixed the BundleConfig. There is no joy yet.
The index will display correctly, but not features like sortable columns.
In the end, this was resolved by precisely matching the number of columns in the header with the number of columns in the displayed table body. Note that the identity column is not counted in the displayed columns. In my example, there are 6 displayed columns and six headers. But seven in the model with a hidden column Id. The Action column also has a header.

Now there are snippets of JavaScript and CSS. I wanted to clean it for reuse.

I was able to partially correct the beam. Then, an experienced employee showed me how to correctly deploy links to a link only on the index page, and not on the _Layout page, where it will be unnecessarily loaded on each page.

You will also see that there are no version numbers in any of the paths. This allows you to allow JS, CSS, and DataTable updates without changing the source code.

Make sure your table id specified in the <table> line exactly matches the value in Javascript at the bottom of C # in front of JS. When I finished this task, there were no JS CSS lines left on my pages. Try the following.

• Download the latest Bootstrap and DataTables from NuGet

• Change the RegisterBundles code in the AppStart folder by adding

   // // These are the DataTables bundles // Be sure to activate them on the Page where they are needed or on _Layout // bundles.Add(new ScriptBundle("~/bundles/dataTables").Include( "~/Scripts/DataTables/jquery.dataTables.js", "~/Scripts/DataTables/dataTables.bootstrap.js")); bundles.Add(new StyleBundle("~/Content/dataTables").Include( "~/Content/DataTables/css/jquery.dataTables.css", "~/Content/DataTables/css/jquery.dataTables.min.css")); 

• Then add links to the nodes on the Top and Bottom of the index page.

In the main section of the index page

  @model IEnumerable<"Your Own Model">.PriceList> @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @Styles.Render("~/Content/dataTables") <h2>Price List</h2> <table id="table_id" class="table table table-striped table-hover"> <thead> <tr> <th> Product Ptr </th> <th> Product Class </th> <th> Ver </th> <th> Year </th> <th> Description </th> <th> Action </th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> @Html.HiddenFor(modelItem => item.PriceList_Id) <td> @Html.DisplayFor(modelItem => item.Product_Pt) </td> <td> @Html.DisplayFor(modelItem => item.ProductClass_Pt) </td> <td> @Html.DisplayFor(modelItem => item.Version) </td> <td> @Html.DisplayFor(modelItem => item.Year) </td> <td> @Html.DisplayFor(modelItem => item.ProductDesc) </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.PriceList_Id }) | @Html.ActionLink("Details", "Details", new { id = item.PriceList_Id }) | @Html.ActionLink("Delete", "Delete", new { id = item.PriceList_Id }) </td> </tr> } </tbody> </table> @section scripts { @Scripts.Render("~/bundles/dataTables") <script type="text/javascript"> $(document).ready(function () { $('#table_id').DataTable(); }); </script> } 

Answer 3

From the W3C script specification:

If the src value has a URI value, user agents should ignore the contents of the element and retrieve the script through the URI

What you want is:

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

NOTE. Case on .dataTable(); . I would have to check, but I think .dataTable() is the creation method, and .dataTable() accesses the datatables object after it is created.

Good luck with datatables. I like it, but "just a few lines and it works!" quickly inferior to a complex API if you want to do anything other than the main one.

Edit: Also, is this legal?

src = "// cdn.datatables.net .....

You do not need "http:"? I would have thought you would do it, but maybe not.

Answer 4

There are a few questions here ...

• Do not use src when you put scripts inside script tag
• Datatables uses tbody and thead to group and style properly. Thus, they must be added inside the table element
• You have different th numbers compared to td . They must match, so all table data has a column that matches
• Group all your scripts at the bottom of the page to speed up the apparent page load time.

This should work ...

 <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>