2017-04-12 8 views
-1

検索ボタンをクリックするとテーブルデータが動的に表示されるデータテーブルが1つあります。FromDataからTodataにデータが来ます。すべてのsearcgボタンをクリックするとテーブルがクリアされます新しいデータが古いデータに追加されず、使用しているテーブルをクリアしない$('#yourTableId').dataTable().fnClearTable(); しかし、問題はこの "fbClearTable();"エクスポートボタン(印刷とExcel)が表示されません。エクスポートボタン(印刷と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.

答えて

0

を含めた後、私はこれらの問題に対処している。

$( '#tableId')。dataTable()。fnDestroy();

あなたはそれを試すことができます!

+0

これはテーブルを破壊し、これによってもボタンが表示されません。 –

+0

はい、要求データの後、再度データテーブルを呼び出します。私はそれがあなたの要求に達することができると思う – xiaoxiaosu

+0

あなたは私を助けてくれますか?この問題を解決するには –

関連する問題