Кнопки, которые не отображаются в Dom: 'Bfrtip'

Question

Я пытаюсь отобразить содержимое таблицы с использованием DataTables, все работает отлично, за исключением кнопок. Они не появляются.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css"> 

    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script> 
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script> 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> 

    <script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script> 
    <script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script> 
    <script type="text/javascript" src="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script> 

    <script src="https://cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js"></script> 



<script type="text/javascript"> 
$(document).ready(function() { 
    $('#example').DataTable({ 
     dom: 'Bfrtip', 
     buttons: [ 
      'copy', 'csv', 'excel', 'pdf', 'print' 
     ] 

    }); 
}); 
    </script> 


<div id="content" class="span10"> 
<div class="row-fluid sortable">  
<div style="height: 80px;"> <a href="<?php echo BASEURL;?>index.php/welcome/mismatchPatch">>>Details of DB which is not matching</a></div> 
    <a href="#" id="test" onClick="javascript:fnExcelReport();">download</a> 
    <table class="display" id="example" cellspacing="0" width="100%"> 


       <!-- <th>HOSTNAME</th> 
        <?php foreach($patchData2 as $tes){?> 
        <th> <?php echo $tes->VERSION;?></th> 
        <th>PATCH</th> 


       <?php } ?>--> 
       <thead> 
       <tr> 
        <th>HOSTNAME</th> 
        <th>10.2.0.4.0</th> 
        <th>10.2.0.5.0</th> 
        <th>11.2.0.1.0</th> 
        <th>11.2.0.2.0</th> 
        <th>11.2.0.3.0</th> 
        <th>11.2.0.4.0</th> 
        <th>12.1.0.2.0</th> 

       </tr> 
       </thead> 
       <tfoot> 
       <tr> 
        <th>HOSTNAME</th> 
        <th>10.2.0.4.0</th> 
        <th>10.2.0.5.0</th> 
        <th>11.2.0.1.0</th> 
        <th>11.2.0.2.0</th> 
        <th>11.2.0.3.0</th> 
        <th>11.2.0.4.0</th> 
        <th>12.1.0.2.0</th> 

       </tr> 
       </tfoot> 

       <tbody> 
       <?php foreach($patchData1 as $tes){ 
    ?> 

<tr><!-- class = " <?php if(checkfunction($tes['HOSTNAME'],$tes['10.2.0.4.0'],$patchData3)== TRUE) { echo "red_color" ; } ?> "> --> 
     <td><?php echo $tes['HOSTNAME'];?></td> 
     <td class = "<?php if(checkfunction($tes['HOSTNAME'],'10.2.0.4.0',$patchData3)== TRUE) { echo 'cellClass' ; } elseif(!empty($tes['10.2.0.4.0'])) { echo 'cellsClass'; } ?> "><?php if (!empty($tes['10.2.0.4.0'])){ echo "Patch 49"; }?></td> 
     <td class = "<?php if(checkfunction($tes['HOSTNAME'],'10.2.0.5.0',$patchData3)== TRUE) { echo 'cellClass' ; } elseif(!empty($tes['10.2.0.5.0'])) { echo 'cellsClass'; } ?> "><?php if (!empty($tes['10.2.0.5.0'])){ echo "Patch 29"; }?></td> 
     <td class = "<?php if(checkfunction($tes['HOSTNAME'],'11.2.0.1.0',$patchData3)== TRUE) { echo 'cellClass' ; } elseif(!empty($tes['11.2.0.1.0'])) { echo 'cellsClass'; }?> "><?php if (!empty($tes['11.2.0.1.0'])){ echo "Patch 13"; }?></td> 
     <td class = "<?php if(checkfunction($tes['HOSTNAME'],'11.2.0.2.0',$patchData3)== TRUE) { echo 'cellClass' ; } elseif(!empty($tes['11.2.0.2.0'])) { echo 'cellsClass'; } ?> "><?php if (!empty($tes['11.2.0.2.0'])){ echo "Patch 27"; }?></td> 
     <td class = "<?php if(checkfunction($tes['HOSTNAME'],'11.2.0.3.0',$patchData3)== TRUE) { echo 'cellClass' ; } elseif(!empty($tes['11.2.0.3.0'])) { echo 'cellsClass'; }?> "><?php if (!empty($tes['11.2.0.3.0'])){ echo "11.2.0.3 BP 39"; }?></td> 
     <td class = "<?php if(checkfunction($tes['HOSTNAME'],'11.2.0.4.0',$patchData3)== TRUE) { echo 'cellClass' ; } elseif(!empty($tes['11.2.0.4.0'])) { echo 'cellsClass'; }?> "><?php if (!empty($tes['11.2.0.4.0'])){ echo "WinBundle 11.2.0.4.161018"; }?></td> 
     <td class = "<?php if(checkfunction($tes['HOSTNAME'],'12.1.0.2.0',$patchData3)== TRUE) { echo 'cellClass' ; } elseif(!empty($tes['12.1.0.2.0'])) { echo 'cellsClass'; }?> "><?php if (!empty($tes['12.1.0.2.0'])){ echo "12.1.0.2.160719OJVMPSU"; }?></td> 
     <!--bgcolor="#FF0000"--> 
</tr> 
    <?php } ?> 

       <?php 
        function checkfunction($host,$version,$patchData3) 
        { 

         foreach($patchData3 as $tes3){ 

          if($tes3->HOSTNAME==$host && $tes3->VERSION==$version){ 

           return TRUE; 
          } 

         } 
        } 
       ?> 

       <?php// print_r($patchData3)?> 
       </tbody> 
</table> 



</div></div> 
    <!--    
     <script type="text/javascript" language="javascript" class="init"> 

var oTable; 

$(document).ready(function() { 
    $('#form').submit(function() { 
     var sData = $('input', oTable.fnGetNodes()).serialize(); 
     alert("The following data would have been submitted to the server: \n\n"+sData); 
     return false; 
    }); 

    oTable = $('#example').dataTable(); 
}); 






</script> --> 
<!-- 
<script type="text/javascript"> 

var allTableCells = document.getElementsByTagName("td"); 
for(var i = 0, max = allTableCells.length; i < max; i++) { 
    var node = allTableCells[i]; 

    //get the text from the first child node - which should be a text node 
    var currentText = node.childNodes[0].nodeValue; 

    //check for 'one' and assign this table cell's background color accordingly 


    //currentText ==='Patch 45'||currentText ==='Patchset 11.2.0.2.0' 
    if (currentText ==='Patch 45'||currentText ==='Patchset 11.2.0.2.0'||currentText ==='11.2.0.3 BP 36'||currentText ==='12.1.0.2.1607190JVMPSU'||currentText ==='12.1.0.2.0') 
     node.style.backgroundColor = "red"; 

} 
</script> 
    .red_color, .red_color td{ color: red; } 
--> 
<style>    

       .cellClass { background-color: red ;color: white} 
       </style> 
       <style>    

       .cellsClass { background-color: green;color: white } 
       </style> 


<script type="text/javascript"> 
function fnExcelReport() { 
    var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">'; 
    tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'; 

    tab_text = tab_text + '<x:Name>Test Sheet</x:Name>'; 

    tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>'; 
    tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>'; 

    tab_text = tab_text + "<table border='1px'>"; 
    tab_text = tab_text + $('#example').html(); 
    tab_text = tab_text + '</table></body></html>'; 

    var data_type = 'data:application/vnd.ms-excel'; 

    var ua = window.navigator.userAgent; 
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) { 
     if (window.navigator.msSaveBlob) { 
      var blob = new Blob([tab_text], { 
       type: "application/csv;charset=utf-8;" 
      }); 
      navigator.msSaveBlob(blob, 'Test file.xls'); 
     } 
    } else { 
     $('#test').attr('href', data_type + ', ' + encodeURIComponent(tab_text)); 
     $('#test').attr('download', 'Test file.xls'); 
    } 

} 
</script> 

Answer 1

попробуйте добавить

<script type='text/javascript' src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js"></script> 

он начал работать для меня, когда я добавил его.

нашел информацию здесь: https://datatables.net/extensions/buttons/examples/print/simple.html