如何将数据加载到Datatable?
问题描述:
我有以下ajax
调用操作方法来获取基于他们的产品类别的产品列表。如何将数据加载到Datatable?
'#ddlProductCategoriesList'
是一个下拉列表(产品类别),当选择更改应该取产品在该类别,并将它们分配给JQuery
Datatable
。我能够销毁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")
}
});
});
答
你为什么不使用数据表的内置支持过滤?
这里是它是如何实现的
数据表标记减少的例子:
<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" }
]
}
});
这样,你忘了需要手动重新装入表。有大量的可用信息的官方文档中,有很多的例子
什么是'table'在'table.destroy()'?我假设它的'var table = $('#t1').DataTable();'?你也可以删除'contentType:'application/json; chatset = utf-8',' - 它对GET没有意义(如果它是POSTit将无法工作,因为您没有将数据串化) –
@StephenMuecke表是var table = $('#t1').DataTable (); –
您是否在浏览器控制台中收到任何错误? –