title: Change Data in DataTable with Select from Dropdownlist
body: <p>I have a view with a Datatable, and I want to change the data every time I select a category from a drop-down list.</p>
  
  <p>I want to only display the albums from the selected category, or all albums from all categories, using Ajax and jQuery. The drop-down list must be placed above the table.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>@using System.Collections.Generic;
  @using CakeStore.App.Areas.Admin.Models.Albums;
  @using CakeStore.App.Services.Contracts;
  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  
  @inject IAlbumService AlbumService
  
  
  @{ ViewData["Title"] = "Category Albums";
      Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
      var albums = ViewBag.CategoryAlbums as List&lt;AlbumTableViewModel&gt;;
  
  }
  
  &lt;h1 class="text-center text-header-page"&gt;Category Albums&lt;/h1&gt;
  &lt;hr class="hr-admin-divider" /&gt;
  &lt;div class="form-group"&gt;
      &lt;a class="btn button-black-white d-flex justify-content-left" href="/Admin/Albums/Create"&gt;Create&lt;/a&gt;
  &lt;/div&gt;
  &lt;hr class="hr-admin-divider" /&gt;
  
  &lt;div class="d-flex"&gt;
  
      &lt;table class="table table-striped table-hover" id="myTable"&gt;
          &lt;tr&gt;
              &lt;th&gt;#&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Category&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
          @for (int i = 0; i &lt; albums.Count(); i++) {
  
              &lt;tr&gt;
                  &lt;td class="col-md-1"&gt;@albums[i].Id&lt;/td&gt;
                  &lt;td class="col-md-3"&gt;@albums[i].Name&lt;/td&gt;
                  &lt;td class="col-md-2"&gt;@albums[i].Category&lt;/td&gt;
                  &lt;td&gt;&lt;a class="btn button-table-edit" href="/Admin/Albums/Edit?id=@albums[i].Id"&gt;EDIT&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;a class="btn button-table-delete d-flex justify-content-right" href="/Admin/Albums/Delete?id=@albums[i].Id"&gt;DELETE&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;a class="btn button-table-view d-flex justify-content-right" href="/Admin/Products/CategoryAlbums?id=@albums[i].Id"&gt;PRODUCTS&lt;/a&gt;&lt;/td&gt;
              &lt;/tr&gt;
          }
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class="row d-flex align-items-end flex-column" style="font-size:12px"&gt;
      &lt;a class="btn-link pull-right col-lg-2" asp-controller="Categories" asp-action="Category"&gt;Back to Categories&lt;/a&gt;
  &lt;/div&gt;
  
  
  @section Scripts {
      &lt;partial name="_ValidationScriptsPartial" /&gt;
  }
  </code></pre>