javascript - 按钮未显示在 Dom :'Bfrtip' 中

Question

我正在尝试使用数据表显示表格内容，除了按钮之外一切正常。他们没有出现。

    <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