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

I too had a difficult time getting DataTables operational in MVC5. I was attempting to use it in the standard Index View that Scaffolding generates against a view model. I was able to build a small prototype but not against the FOREACH generator for the table.
I entered many different JS and CSS code lines from suggested examples and also patched the BundleConfig. Still no joy.
The Index would present properly but not the features such as sortable columns.
Eventually that was resolved by exactly matching the count of columns in the header to the count of columns in the displayed table body. Notice that the Id 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 the Id column hidden. The Action Column also has a header.

By now there are JavaScript and css fragments all over the place. I wanted to clean it up for reuse.

I was able to partially correct the bundle. Then a skilled associate showed me how to properly deploy the bundle references solely in the Index Page not on the _Layout Page where it would be unnecessarily loaded on every page.

You will also see that there are no Version numbers in any of the paths. This is purposeful 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 the Javascript at the bottom with a # in front in the JS. When I was finished with this task there were no remaining JS of CSS lines in my pages. Try the following.

1. Download the Latest Bootstrap and DataTables from NuGet

2. Modify 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"));
   

3. Then add references to the bundles at the Top and Bottom of the Index page.

At the head 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>
}

From W3C scripting spec:

If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI

What you want is this:

<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: The casing on .dataTable();. I'd have to check but I think .dataTable() is the creation method and .DataTable() accesses the datatables object once created.

Good luck with datatables. I like it but the "just a few lines and it works!" quickly gives way to a complex API once you want to do anything beyond the basic.

Edit: Also, is this legal?

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

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

There are several issues here...

1. Don't use src when you are putting scripting inside the script tag
2. Datatables uses elements tbody and thead to group and stylize things correctly. So those need added inside the table element
3. You have different numbers of th compared to the number of td. These need to match so all table data has a column it corresponds to
4. Group all your scripts at the bottom of your 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>