Кнопка печати не отображается для таблиц данных в jquery

Question

У меня есть следующая js fiddle 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>')
                } );
            } );
        }
    } );});

Answer 1

Вам просто нужно добавить,

 '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>')
                } );
            } );
        }
    } );});