Question

我目前正在尝试将一些导出按钮添加到我的数据表表中。

我已经加载了所有正确的JS和CSS文件，例如

<!--Table JS & CSS-->
    <script src="../plugins/DataTables/DataTables-1.10.12/js/jquery-1.12.3.js"></script>
    <script src="../plugins/DataTables/DataTables-1.10.12/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../plugins/DataTables/DataTables-1.10.12/css/jquery.dataTables.min.css"/>

<!--Button JS & CSS-->
    <script src="../plugins/DataTables/DataTables-1.10.12/js/dataTables.buttons.min.js"></script>
    <script src="../plugins/DataTables/DataTables-1.10.12/js/jszip.min.js"></script>
    <script src="../plugins/DataTables/DataTables-1.10.12/js/pdfmake.min.js"></script>
    <script src="../plugins/DataTables/DataTables-1.10.12/js/vfs_fonts.js"></script>
    <script src="../plugins/DataTables/DataTables-1.10.12/js/buttons.html5.min"></script>
    <link rel="stylesheet" type="text/css" href="../plugins/DataTables/DataTables-1.10.12/css/buttons.dataTables.min.css"/>

当我加载JS时，它会删除我的“条目”功能和“模糊搜索”功能。

它也不显示HTML5按钮？！

JavaScript如下

<script>
$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example thead th').each( function () {
        var title = $(this).text();
        $(this).append( '<input type="text" class="filter_box" placeholder="Filter" />' );
    } );

    // DataTable
    var table = $('#example').DataTable(
    {   
        //Set display length
        "iDisplayLength": 100

    }
    );

    // Apply the search
    table.columns().every( function () {
        var that = this;

                $( 'input', this.header() ).on( 'click', function(e) {
            e.stopPropagation();
        } );

        $( 'input', this.header() ).on( 'keyup change', function () {

            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );
</script>

如果我删除下面的JavaScript，则页面加载OK，例如使用“条目”功能和“模糊搜索”功能，但显然没有HTML5按钮

//Set Button settings
dom: 'lBfrtip',
buttons: [
    'copyHtml5',
    'excelHtml5',
    'csvHtml5',
    'pdfHtml5'
]

数据来自HTML表格，例如

<table width="100%" class="compact stripe hover row-border order-column" id="example">
    <thead class="results_thead">
        <tr>
            <th>W/h<br></th>
            <th>Product<br></th>
            <th>Description<br></th>
            <th>Free Stock<br></th>
            <th>On Order Qty<br></th>
            <th>Make or Buy<br></th>
            <th>Last Trans Date<br></th>
            <th>Last Trans Type<br></th>
            <th>Analysis B<br></th>
            <th>Next Order No<br></th>
            <th>Next On Order Qty<br></th>
            <th>Next Date Req<br></th>
        </tr>
    </thead>
    <tbody class="results_tbody">
        <tr style="text-align: center">
            <td>'.$row['warehouse'].'</td>
            <td>'.$row['product'].'</td>
            <td>'.$row['description'].'</td>
            <td>'.$row['negative_free_stock'].'</td>
            <td>'.$row['on_order_qty'].'</td>
            <td>'.$row['make_or_buy'].'</td>
            <td>'.$row['last_transaction_date'].'</td>
            <td>'.$row['last_transaction_type'].'</td>
            <td>'.$row['analysis_b'].'</td>
            <td>'.$row['next_order_no'].'</td>
            <td>'.$row['next_on_order_qty'].'</td>
            <td>'.$row['next_date_required'].'</td>
        </tr>';
</tbody>
</table>

所以我认为问题在于上面的代码？

非常感谢任何想法

Bepster

Answer 1

   I have solve the problem by changing html table structure
    you can see the Demo

http://jsfiddle.net/dipakthoke07/ebRXw/2229/

jQuery Javascript HTML 5导出按钮不会出现并删除其他按钮

1 个答案: