ASP.NET的jQuery數據過濾

Question

我很新的ASP.NET和嘗試建立購物應用程序。我使用jquery.datatable和Ajax顯示在錶店裏的所有項目：

@model IEnumerable<OnlineShoppingApp.Models.Category> 
 

 
@{ 
 
    ViewBag.Title = "Index"; 
 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
 
} 
 

 
<div class="col-md-2"> 
 
    <ul id="categories"> 
 
     @foreach(var category in Model) 
 
     { 
 
      <li data-category-id="@category.Id">@category.Name</li> 
 
     } 
 
    </ul> 
 
</div> 
 
<div class="col-md-10"> 
 
    <table id="items" class=" table table-bordered table-hover"> 
 
     <thead> 
 
      <tr> 
 
       <th>Name</th> 
 
       <th>Description</th> 
 
       <th>Price</th> 
 
       <th>Category</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody></tbody> 
 
    </table> 
 
</div> 
 

 
@section Scripts { 
 
    <script> 
 
     $(document).ready(function() { 
 
      $("#items").DataTable(
 
       { 
 
        ajax: 
 
        { 
 
         url: "/api/items", 
 
         dataSrc: "" 
 
        }, 
 
        columns: 
 
        [ 
 
         { 
 
          data: "Name", 
 
         }, 
 
         { 
 
          data: "Description", 
 
         }, 
 
         { 
 
          data: "Price", 
 
         }, 
 
         { 
 
          data: "Category.Name", 
 
         } 
 
        ] 
 
       } 
 
      ) 
 

 
      $("li").click(function() { 
 
       var element = $(this); 
 
      }); 
 
     }); 
 

 
    </script> 
 
    }

而且在CategoryController：

 public ActionResult Index() 
    { 
     var categories = context.Categories.ToList(); 

     return View(categories); 
    } 

在左邊我列出所有類別，當點擊一個我想過濾這個數據表只顯示匹配所選類別的項目。我不想讓頁面重新加載，我也不知道從哪裏開始。

Answer 1

你只需要添加下面的CSS和JS文件在佈局

//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css 
//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js 

現在在你的網頁

<script> 
     $(document).ready(function() { 
      $("#items").DataTable({ 
       "processing": true, // for show progress bar 
       "serverSide": true, // for process server side 
       "filter": false, // this is for disable filter (search box) 
       "orderMulti": false, // for disable multiple column at once 
       "ajax": { 
        "url": "/api/items", 
        "type": "POST", 
        "datatype": "json" 
       }, 
       "columns": [ 
         { "data": "Name", "name": "Name", "autoWidth": true }, 
         { "data": "Description", "name": "Description", "autoWidth": true }, 
         { "data": "Price", "name": "Price", "autoWidth": true }, 
         { "data": "CategoryName", "name": "CategoryName", "autoWidth": true } 

       ] 
      }); 
     }); 
    </script> 

控制器代碼添加以下代碼。

[HttpPost] 
     public ActionResult items() 
     { 

      var draw = Request.Form.GetValues("draw").FirstOrDefault(); 
      var start = Request.Form.GetValues("start").FirstOrDefault(); 
      var length = Request.Form.GetValues("length").FirstOrDefault(); 
      //Find Order Column 
      var sortColumn = Request.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][name]").FirstOrDefault(); 
      var sortColumnDir = Request.Form.GetValues("order[0][dir]").FirstOrDefault(); 


      int pageSize = length != null? Convert.ToInt32(length) : 0; 
      int skip = start != null ? Convert.ToInt32(start) : 0; 
      int recordsTotal = 0; 

       var v= context.Categories.ToList(); 

       //SORT 
       if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir))) 
       { 
        v = v.OrderBy(sortColumn + " " + sortColumnDir); 
       } 

       recordsTotal = v.Count(); 
       var data = v.Skip(skip).Take(pageSize).ToList(); 
       return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data }, JsonRequestBehavior.AllowGet); 
      }