簡體   English   中英

jQuery中的數據表未顯示“打印”按鈕

[英]Print button not displayed for Data Tables in jquery

我有以下js小提琴https://jsfiddle.net/jek1uobr/。盡管我添加了打印按鈕,但它並未顯示在數據表中。

 $(function () {$('#example').DataTable( {
        orderCellsTop: true,
    dom: 'Bfrtip',
    buttons: [
        'print'
    ],
        "columnDefs": [                   
                      {   "width": "25%", "targets": [ 1 ] }
                   ],
    "dom" : '<"top"fl<"clear">>rt<"bottom"ip<"clear">>',

                 initComplete: function () {
                     this.api().columns([1,2,3,4,5]).every(function () {
                     var column = this;
                     var select = $('<select style="width:130px; font-size: 13px; padding: 2px 1px 2px 1px; background: #fff; border: 1px solid #ccc; border-radius: 6px;position: relative; "><option value="">(All)</option></select>')
                    .appendTo($(column.header()))
                    .appendTo( $("#example thead tr:eq(1) th").eq(column.index()).empty())
                             .on('change', function () {
                                 var val = $.fn.dataTable.util.escapeRegex(
                                     $(this).val()
                                 );

                                 column
                                     .search(val ? '^' + val + '$' : '', true, false)
                                     .draw();
                             });
                         column.data().unique().sort().each(function (d, j) {
                             select.append('<option value="' + d + '">' + d + '</option>')
                } );
            } );
        }
    } );});

您只需要添加,

 'dom': "<'row'<'col-sm-4'l> <'col-sm-8'p>>" + 'Bfrtip',

有關更多信息,請參見以下內容: https://datatables.net/reference/option/dom

您更新的代碼應如下所示:

$(function () {$('#example').DataTable( {
    orderCellsTop: true,
    'dom': "<'row'<'col-sm-4'l> <'col-sm-8'p>>" + 'Bfrtip',
    buttons: [
        'print'
    ],
        "columnDefs": [                   
                      {   "width": "25%", "targets": [ 1 ] }
                   ],

                 initComplete: function () {
                     this.api().columns([1,2,3,4,5]).every(function () {
                     var column = this;
                     var select = $('<select style="width:130px; font-size: 13px; padding: 2px 1px 2px 1px; background: #fff; border: 1px solid #ccc; border-radius: 6px;position: relative; "><option value="">(All)</option></select>')
                    .appendTo($(column.header()))
                    .appendTo( $("#example thead tr:eq(1) th").eq(column.index()).empty())
                             .on('change', function () {
                                 var val = $.fn.dataTable.util.escapeRegex(
                                     $(this).val()
                                 );

                                 column
                                     .search(val ? '^' + val + '$' : '', true, false)
                                     .draw();
                             });
                         column.data().unique().sort().each(function (d, j) {
                             select.append('<option value="' + d + '">' + d + '</option>')
                } );
            } );
        }
    } );});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM