数据表导出按钮未显示

Question

我有一张在 $( document ).ready 函数中创建的表格。我也在使用 jQuery DataTables 插件。出于某种原因，当页面加载时，数据表会加载，但导出按钮不会。

function loadAct() {
            var url = 'http://10.26.192.70/apns/index.php/Busqueda_c/listarAsignaciones';
            $.post(url, {
            }, function (data) {
                var arrayAsignaciones = JSON.parse(data);
                // INGRESA INFORMACION DENTRO DE CADA TABLA DESPUES DE HABER AGREGADO UNA ASIGNACION
                for (i = 1; i < arrayAsignaciones.length; i++) {
                    var str2 = arrayAsignaciones[i].Act_TipoActa;
                    var id2 = str2.replace(/ /gi, '-');
                    var idtable2 = 'table-' + id2;
                    var idtbody2 = 'tbody-' + id2;
                    var table = document.getElementById(idtable2);
                    var tbody = document.getElementById(idtbody2);
                    // Aca comienza la creacion del <tbody> 
                    $(table).find(tbody).append(
                            "<tr>" +
                            "<td>" + arrayAsignaciones[i].Act_Grado + "</td>" +
                            "<td>" + arrayAsignaciones[i].Act_Nombre + "</td>" +
                            "<td>" + arrayAsignaciones[i].Act_Rut + "</td>" +
                            "<td>" + arrayAsignaciones[i].Act_Codigo + "</td>" +
                            "<td>" + arrayAsignaciones[i].Act_Dotacion + "</td>" +
                            "<td>" + arrayAsignaciones[i].Act_FechaInicio + "</td>" +
                            "<td>" + arrayAsignaciones[i].Act_FechaTermino + "</td>" +
                            "<td>" +
                            "<a href='#' onclick='eliminarAsignacion(" + arrayAsignaciones[i].Act_Rut + ", " + arrayAsignaciones[i].Act_Id + ");return false;'>" +
                            "<span class='glyphicon glyphicon-remove' style='margin-left:25px; font-size:15px; color:red;'>" +
                            "</span>" +
                            "</a>" +
                            "</td>" +
                            "</tr>"
                            );

                    // Aca termina la creacion del <tbody> 
                }

                $('.tableBody').DataTable({
                    dom: 'Blfltip',
                    buttons: [
                        'copyHtml5',
                        'excel',
                        'csvHtml5',
                        'pdfHtml5'
                    ],
                        "sDom": 'rt',
                        paging: false,
                        searching: false,
                        ordering: false
                });
            });
        }

但它没有显示任何导出按钮，我无法解决它。

我还从 dateTable 下载构建器中添加了以下 Javascript 和 CSS：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.6/jq-2.2.3/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/af-2.1.2/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.3/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.css"/> 
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.6/jq-2.2.3/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/af-2.1.2/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.3/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.js"></script>

这是我使用 dataTabe 的 HTML：

<div class="panel panel-success" id="" style="width:1400px; margin-left:auto; margin-right:auto ">
    <div class="panel-heading">
        <table>
            <tbody>
                <tr>
                    <td><h3 class="panel-title">PILOTOS (17%)</h3></td>
                    <td><div></div></td></tr>
            </tbody>
        </table>
            
    </div>
    <div class="panel-body" id="PILOTOS-(17%)">
        <div id="table-PILOTOS-(17%)_wrapper" class="dataTables_wrapper no-footer">
            <table class="display tableBody dataTable no-footer" id="table-PILOTOS-(17%)" role="grid">
                <thead>
                    <tr role="row"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;">GRADO</th>
                        <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;">NOMBRE</th>
                        <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;">RUN</th>

科迪戈 点点滴滴 费查伊尼西奥 费查总站 消除 心肺复苏术GDO。 12 自卫队 自卫队 自卫队 自卫队 asdfsdf asdfsdf 证券交易委员会。信息（第 7 页）。 2016 年 3 月 8 日 2016 年 4 月 8 日

Answer 1

请删除 "sDom": 'rt' 这可能是导致问题的原因。

从您提供的 HTML 和 JS 中，我可以看到您使用了 DOM onject，如下所示

   dom: 'Blfltip'

请改成

dom: 'Bfrtip'

这可能是问题所在。

还要在整个表格部分而不是表格主体上启动 DataTable。 喜欢：

 $('.dataTable').DataTable({

检查您是否还包含了所有必需的 CSS 和 JS 文件。 否则你的代码看起来不错。

演示：https://jsfiddle.net/Prakash_Thete/rbunuv9b/2/

参考：https://datatables.net/extensions/buttons/examples/html5/simple.html

Answer 2

你需要按照这个例子 Here 。

它对我有用。

1. 按此顺序添加所有js。

   https://code.jquery.com/jquery-3.5.1.js
   https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js
   https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js
   https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
   https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js
   https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js
   https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js
   

2. 添加 css。

   https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css      
   
   https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css
   

3. 以初始化数据表为例。

   $(document).ready(function() {
      $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
         'copyHtml5',
         'excelHtml5',
         'csvHtml5',
         'pdfHtml5'
       ]
     } );
   } );