javascript - jquery中的数据表不显示打印按钮
问题描述
我有以下 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>')
} );
} );
}
} );});
解决方案
你只需要添加,
'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>')
} );
} );
}
} );});
推荐阅读
- xamarin - xamarin蓝牙接收数据不起作用
- javascript - react-native 新版本的问题:FAILURE: Build failed with an exception
- c# - 文本框允许超过 3 个值
- ruby-on-rails - 在 Rails 中使用 group by 和 find_in_batches
- django - Django - ModelForm - 初始值
- javascript - 在登录/注册表单之间切换时出现问题
- google-sheets - 具有多个规则的条件格式 Google 表格
- list - 如何创建会影响子列表的此 prolog 谓词的“深度”版本?
- node.js - 如何比较MongoDB中的字符串是小写还是大写
- javascript - AXIOS PUT 请求返回 200 代码但不更新内容?