jquery数据表的第二次执行不会重新绘制数据

Question

我正试图从服务器加载数据，第一次加载时效果很好，但当我重新加载时，它什么也没做。请不要杀了我，这是一个遗留项目。

我试着进行一个正常的调用并重新加载数据表，但也没有成功。

在文件中说，清除表将是足够的，我尝试了它，清除功能是不重新配置的。

脚本

jQuery(document).ready(function() {
App.initSelect();
//Initialization of the datatable
var grid = new Datatable();
InitGrid(); //function for update the grid;
//Button used to reload the data, and work to go to server
$("#btn_refresh").click(function () { 
grid = new Datatable();
InitGrid(); 
grid.submitFilter(); //if i dont put this, it doesn't go to the server 
});

function InitGrid() {
grid.init({
src: $("#datatable_report_sales"),
dataTable: {
"destroy": true, 
"serverSide": true,
"bPaginate": false,
"order": [[5, "desc"]],
"ajax": {
"url": "/api/Lotteries/GetSales",
"draw": 1,
"data": function (data) {
data.date = $('#reportrange span').text(); 
ui.block('Loading...');
},
"dataSrc": function (res) {
ui.unblock();
return res.data;
},
}
}
});
}
});

Html

<div class="portlet-body flip-scroll">
<table class="table table-bordered table-striped table-condensed flip-content dataTable no-footer" 
id="datatable_report_sales" style="margin: 0 !important;" role="grid">
<thead class="flip-content">
<tr role="row"><th class="sorting" tabindex="0" aria-controls="datatable_report_sales"
rowspan="1" colspan="1" aria-label=" Vendedor : activate to sort column ascending">
Seller </th><th width="15%" class="sorting" tabindex="0" aria-controls="datatable_report_sales" 
rowspan="1" colspan="1" aria-label=" Venta : activate to sort column ascending">
Sale </th><th width="15%" class="sorting" tabindex="0" aria-controls="datatable_report_sales"
rowspan="1" colspan="1" aria-label=" Comisión : activate to sort column ascending"> 
Comisión </th><th width="15%" class="sorting" tabindex="0" aria-controls="datatable_report_sales" 
rowspan="1" colspan="1" aria-label=" Comisión Sup. : activate to sort column ascending">
Comisión Sup. </th><th width="15%" class="sorting" tabindex="0" aria-controls="datatable_report_sales"
rowspan="1" colspan="1" aria-label=" Premios : activate to sort column ascending"> 
Prices </th><th width="15%" class="sorting_desc" tabindex="0" aria-controls="datatable_report_sales" 
rowspan="1" colspan="1" aria-sort="descending" aria-label=" Resultado : activate to sort column ascending"> 
Result
</th></tr>
</thead>
<tbody>
</tbody>
</table>
<div class="bottom"></div><div class="clear"></div>

</div>

Answer 1

我想，由于任何原因，在这个版本的数据表中都需要强制销毁，所以我在再次初始化元素表之前销毁了元素表中的表，我不确定这是否是最方便的，但它现在可以工作

$("#btn_refresh").click(function () { 

$("#datatable_report_sales").DataTable().destroy();
grid.submitFilter();
grid = new Datatable();
InitGrid(); 
});

Answer 2

init()方法仅用于初始化DataTable。你应该只在第一次使用它。初始化DataTable后，可以使用ajax.reload();通过ajax请求用新数据更新表。

https://datatables.net/reference/api/ajax.reload((

试试这个，

$("#btn_refresh").click(function () { 
// ....
grid.ajax.reload();
// ....
});