[英]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.