單擊按鈕后如何清除數據表正文

Question

我有一個數據表，其中數據來自后端。 數據是基於 FromDate 到 ToDate 的，在表格中我們可以對數據進行排序。但是當 FromDate 到 ToDate 之間沒有數據時，我會顯示“在我的表格中找不到數據”但是當我點擊表格頭部的排序圖標時，因為表本身不刷新。

 var inittable = function() { var finance = $('#financetbl'); var ofinance = finance.dataTable({ // Internationalisation. For more info refer to http://datatables.net/manual/i18n "language": { "aria": { "sortAscending": ": activate to sort column ascending", "sortDescending": ": activate to sort column descending" }, "emptyTable": "No data available in table", "zeroRecords": "No matching records found" }, buttons: [{ extend: 'print', className: 'btn dark btn-outline' }, { extend: 'excel', className: 'btn yellow btn-outline ' }], responsive: false, //"ordering": false, disable column ordering //"paging": false, disable pagination colReorder: { reorderCallback: function () { console.log( 'callback' ); } }, "order": [ [0, 'asc'] ], "lengthMenu": [ [5, 10, 15, 20, -1], [5, 10, 15, 20, "All"] // change per page values here ], // set the initial value "pageLength":10, "dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). // So when dropdowns used the scrollable div should be removed. //"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", }); }

表的 jquery 和 Ajax 代碼：-

 $('#paymentdetails').click(function(){ if( $(".datepickerInputFROM").val() > $(".datepickerInputTO").val()) { alertify.alert('From Date should not be greater than To Date') return false; $(".datepickerInputFROM").val =""; } var getData = basePath +'AdminFinance/GetStudentPaymentsForDate/?FromDate='+$(".datepickerInputFROM").val() + '&ToDate='+$(".datepickerInputTO").val() if (($(".datepickerInputFROM").val() == "") && ($(".datepickerInputTO").val() == "")) { alertify.alert('Please select dates to proceed.') return false; } else if (($(".datepickerInputFROM").val() == "") || ($(".datepickerInputTO").val() == "")) { alertify.alert('Please select dates to proceed.') return false; } $.ajax({ url: getData , async: false , success: function (response) { // alert(response[0]); //$('#financetbl tbody').empty(); $('#financetbl tbody').empty(); // if (response.resultCourse != '' && response[0]!= 'null') { if (response.length > 0) { var tr; for (var i = 0; i < response.length; i++) { tr = '<tr>' tr += "<td>" + response[i].transactionDate+ "</td>"; tr += "<td>" + response[i].applicationNumber+ "</td>"; tr += "<td>" + response[i].applicantName+ "</td>" tr += '</tr>' $('#financetbl tbody').append(tr); } inittable(); console.log(response) } else { console.log(response) alertify.alert("Error : No Payments Details Found"); inittable(); } } }); });

我已嘗試使用以下選項，但沒有任何效果。

 `$("#tbodyID tr").detach(); $("#tbodyID tr").remove(); $("#tbodyID").empty(); $("#tbodyID").html(""); $("tbody").empty(); $("tbody").html(""); $('#table').dataTable().fnDraw(false)`

Answer 1

您想在沒有數據時取消初始化表數據嗎？ 那試試這個？

// destroy first
$('#yourTableId').dataTable().fnDestroy();
// then initialize table again
$('#yourTableId').dataTable({ ... });

Answer 2

清除表分頁和初始化表：

$('#DT_GRID').dataTable().fnDestroy(); 
$('#DT_GRID').DataTable(); 
$('.dataTables_length').addClass('bs-select');'