Dom 中未显示的按钮:'Bfrtip'

Posted

技术标签:

【中文标题】Dom 中未显示的按钮:\'Bfrtip\'【英文标题】:Buttons not showing up in Dom:'Bfrtip'Dom 中未显示的按钮:'Bfrtip' 【发布时间】:2017-06-03 07:06:42 【问题描述】:

我正在尝试使用 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" >


               <!--  <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>

【问题讨论】:

我的盒子上设置了一个数据表。在我删除“打印”按钮之前,它会使用您的配置崩溃。 【参考方案1】:
`
        "dom": "<'row'<'form-inline' <'col-sm-offset-5'B>>>"
                    +"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>"
                    +"<'row'<'col-sm-12'tr>>"
                    +"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

                    "buttons":[
                    
                            "text": "<i class='fa fa-user-plus'></i>",
                            "titleAttr": "Agregar Usuario",
                            "action":   function()
                                            agregar_nuevo_usuario();
                            
                    ,
                    
                            "extend":    "excelHtml5",
                            "text":      "<i class='fa fa-file-excel-o'></i>",
                            "titleAttr": "Excel"
                    ,
                    
                            "extend":    "csvHtml5",
                            "text":      "<i class='fa fa-file-text-o'></i>",
                            "titleAttr": "CSV"
                    ,
                    
                            "extend":    "pdfHtml5",
                            "text":      "<i class='fa fa-file-pdf-o'></i>",
                            "titleAttr": "PDF"
                    
                    ]
`

【讨论】:

您能否就如何以及为什么发表评论和文字?【参考方案2】:

尝试添加

<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

【讨论】:

以上是关于Dom 中未显示的按钮:'Bfrtip'的主要内容,如果未能解决你的问题,请参考以下文章

dataTables导出按钮显示在自定义位置?

告诉数据表使用自定义按钮进行文件导出

.nib 文件中未显示按钮

从嵌入按钮复制的 iframe 中未显示正确的 url

使用数据表中的“全选”按钮搜索后选择所有可见行

iOS模拟器中未显示底部按钮