如何將數據加載到Datatable？

我有以下ajax調用操作方法來獲取基於他們的產品類別的產品列表。如何將數據加載到Datatable？

'#ddlProductCategoriesList'是一個下拉列表（產品類別），當選擇更改應該取產品在該類別，並將它們分配給JQueryDatatable。我能夠銷燬jquery表中的以前的數據，但銷燬後無法用新數據初始化它，我如何使用新數據加載jquery datatable？

注：操作返回的數據作爲JSON成功，但加載數據到表故障

$('#ddlProductCategoriesList').change(function (item) { 

     var x = $(this).val(); 

     $.ajax({ 
      url: '@Url.Action("GetProductsByCategory","Products")', 
      method: 'get', 
      cache:false, 
      data: { 'cid': x }, 
      contentType: 'application/json; chatset=utf-8', 
      dataType: 'json', 
      success: function (data) {      
       alert('hello'); 

       table.destroy(); 

       $('#t1').empty(); 

       $('#t1').dataTable({ 
        data: data, 
        columns: [ 
         { 'data': 'item.ID' }, 
         { 'data': 'item.CategoryID' }, 
         { 'data': 'item.ProductName' }, 
         { 'data': 'item.LastName' } 

        ] 
       }); 


      }, 
      error: function (x, y, z) { 
       alert("error") 

      } 
     }); 
    });

來源

2016-01-13 Phill Greggan

什麼是'table'在'table.destroy（）'？我假設它的'var table = $（'＃t1'）.DataTable（）;'？你也可以刪除'contentType：'application/json; chatset = utf-8'，' - 它對GET沒有意義（如果它是POSTit將無法工作，因爲您沒有將數據串化） –

@StephenMuecke表是var table = $（'＃t1'）.DataTable （）; –

您是否在瀏覽器控制檯中收到任何錯誤？ –

你爲什麼不使用數據表的內置支持過濾？

這裏是它是如何實現的

數據表標記減少的例子：

<table class="table" id="dt"> 
    <thead> 
     <tr role="row" class="filter"> 
      <td> 
       <select id="dropDownWithCategories"> 
        <option value="1">Category 1</option> 
        <option value="2">Category 2</option> 
       </select> 
      </td> 
      <td> 
       <button class="filter-submit">Search</button> 
      </td> 
     </tr> 
     <tr> 
      <th>Id</th> 
      <th>Product</th> 
     </tr> 
    </thead> 
    <tbody></tbody> 
</table>

數據表初始化：

grid.init({ // grid.init calls an own datatables wrapper class which I will ignore... 
    src: $("#dt"), 
    dataTable: { 
     ajax: { 
      url: "/Products/GetProductsByCategory", // 
      data: function (d) { 
       d.id = $("#dropDownWithCategories").val(); // Here you add the category parameter when calling GetProducts 
      } 
     }, 
     serverSide: true, 
     filter: true, 
     retrieve: true, 
     columns: [ 
     { data: "Id" }, 
     { data: "Product" } 
     ] 
    } 
});

這樣，你忘了需要手動重新裝入表。有大量的可用信息的官方文檔中，有很多的例子

https://www.datatables.net

來源

2016-01-19 20:10:41 Javier

如何將數據加載到Datatable？

回答

相關問題