title: ASP.NET MVC5 and DataTables for a beginner: what goes where?
body: <p>I've asked this question on the DataTables forum, but in the interest of getting quick feedback, I'm willing to endure some abuse, so I'm cross-posting here.</p>
  
  <hr>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <p>Beginning with the DataTables instructions ("just add these three lines..."), here's what I have:</p>
  
  <pre><code>&lt;!-- DataTables CSS --&gt;
  &lt;link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css"&gt;
  
  &lt;!-- jQuery --&gt;
  &lt;script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- DataTables --&gt;
  &lt;script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"&gt;
  &lt;/script&gt;
  
  &lt;h2&gt;Index&lt;/h2&gt;
  
  &lt;p&gt;
      @Html.ActionLink("Create New", "Create")
  &lt;/p&gt;
  &lt;table class="table" id="products" &gt;
      &lt;tr&gt;
          &lt;th&gt; @Html.DisplayName("Code")&lt;/th&gt;
          &lt;th&gt;@Html.DisplayNameFor(model =&gt; model.Name)&lt;/th&gt;
          &lt;th&gt;@Html.DisplayNameFor(model =&gt; model.Category)&lt;/th&gt;
          &lt;th&gt;@Html.DisplayName("Active")&lt;/th&gt;
          &lt;th&gt;@Html.DisplayName("Published")&lt;/th&gt;
      &lt;/tr&gt;
  
  @foreach (var item in Model) {
      &lt;tr&gt;
          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.ProductCode)&lt;/td&gt;
          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.Name)&lt;/td&gt;
          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.Category)&lt;/td&gt;
          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.Active.Value)&lt;/td&gt;
          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.Published.Value)&lt;/td&gt;
          &lt;td&gt;@Html.ActionLink("Details", "Details", new { id=item.ID })&lt;/td&gt;
      &lt;/tr&gt;
  }
  &lt;/table&gt;
  </code></pre>
  
  <p>Theoretically, all I need to add is one line:</p>
  
  <pre><code>$(document).ready( function () {
      $('#products').DataTable();
  } );
  </code></pre>
  
  <p>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 <code>script</code> tag for the third block:</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"&gt;
  $(document).ready( function () {
      $('#products').DataTable();
  } );&lt;/script&gt;
  </code></pre>
  
  <p>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 <a href="https://github.com/ALMMa/datatables.mvc" rel="noreferrer">https://github.com/ALMMa/datatables.mvc</a> ?  Should I abandon all hope until I've mastered JavaScript?</p>
  
  <p>Thanks for whatever help you can give me.</p>
  
  <p>Cheers.</p>
  
  <p>JD </p>