如何将数据加载到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？

回答

相关问题