導出按鈕（打印和excel）不會進入數據表

Question

我有一個數據表，其中表數據是通過點擊搜索按鈕來動態的。數據將介於FromData和Todata之間。對於每個searcg按鈕單擊我希望表格清除以便新數據不會附加到舊數據並清除我正在使用的表$('#yourTableId').dataTable().fnClearTable(); 但問題是由於此「fbClearTable（）;」導出按鈕（打印和Excel）不會來。

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'); 
 
       } 
 
      }, 
 
\t \t \t \t 
 
\t \t \t \t "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>>", 
 
      }); 
 
     }

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

每當我從代碼按鈕刪除$('#yourTableId').dataTable().fnClearTable();來了，但包括$('#yourTableId').dataTable().fnClearTable(); buttons are coming.

Answer 1

我這些問題的處理遵循這種方式後：

$（'＃tableId'）。dataTable（）。fnDestroy（）;

你可以試試！