1.7.3.DataTable plug-in using AJAX source

• 1.Open package manager console and type:

    install-package jquery.datatables -version:1.10.11

• 2.Modify BundleConfig.cs

        bundles.Add(new ScriptBundle("~/bundles/lib").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/bootstrap.js",
                        "~/Scripts/bootbox.js",
                        "~/Scripts/respond.js",
                        "~/Scripts/DataTables/jquery.datatables.js",
                        "~/Scripts/DataTables/datatables.bootstrap.js"
                       ));
        bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/datatables/css/datatable.bootstrap.css",
                      "~/Content/site.css"));

• 3.Modify _layout.cshtml

          @Scripts.Render("~/bundles/lib")

• 4.Modify Controllers/CustomersController.cs

        public ActionResult Index()
        {
            return View();
        }

• 5.Modify Customers/index.cshtml

 @model IEnumerable<Vidly2.Models.Customer>
@{
    ViewBag.Title = "index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Customers</h2>

<table id="customers" class="table table-bordered table-hover">
 <thead>
  <tr>
   <th>Customer</th>
   <th>Membership Type</th>
   <th>Delete</th>
  </tr>
 </thead>
 <tbody></tbody>
</table>


@section scripts
{
  <script>
   $(document).ready(function () {
    $('#customers').DataTable({
     ajax: {
      url: "/api/customers",
      dataSrc: ""
     },
     columns: [
      {
       data: "Name",
       render: function (data, type, customer) {
        return "<a fref = '/customers/edit/" + customer.id + "'>" + customer.name + "</a>";
       }
      },
      {
       data: "Name"
      },
      {
       data: "id",
       render: function (data) {
        return "<button class='btn-link js-delete' data-customer-id" + data + ">Delete</button>";
       }
      }
     ]
    });
    $("#customers").on("click", ".js-delete", function () {
     var button = $(this);

     bootbox.confirm("Are you want to delete this customer?", function (result) {
      if (result) {
       $.ajax({
        url: "/api/customers/" + button.attr("data-customer-id"),
        method: "DELETE",
        success: function () {
         button.parents("tr").remove();
         console.log("sucess");
        }
       });
     };
    });
    });
   });
  </script> 
}