Question

显示导出按钮后，无法显示每页的记录下拉列表。我想在桌子上展示它们。这是我的代码：

$(document).ready(function() {
    $('#dataTables-example').DataTable({
        pageLength: 5,
        dom: 'Bfrtip',
        buttons: ['csv', 'excel', 'pdf', 'print'],
        responsive: true
    });
    $('.datetext').datepicker({
        format: "yyyy-mm-dd"
    });
});

如果删除表格上的按钮，则显示每页下拉记录，但我想显示它们。如何显示它们？

Answer 1

此布局在此处完成：

dom: 'Bfrtip',

所以你有几个选择，我不知道你想做什么，但试试这个：

dom: 'flit',

这将在左侧显示选择器。您添加的按钮通常会添加到右侧，因此您需要将其设置在左侧。

Answer 2

如果我没错，你希望同时看到页面长度和导出按钮。按照我的说法，除了本机导出按钮之外，您还可以使用以下代码实际获得一个真正漂亮的按钮单击下拉菜单。你只需要传递“页面长度”即可。使用附加按钮初始化DT的参数，该按钮将是页面长度下拉的占位符。例子就是。

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        // Configure the drop down options.
        lengthMenu: [
            [ 10, 25, 50, -1 ],
            [ '10 rows', '25 rows', '50 rows', 'Show all' ]
        ],
        // Add to buttons the pageLength option.
        buttons: [
            'pageLength','excel','print'
        ]
    });
});

不要忘记包含select js和css。您可以找到here

Answer 3

如果你想在一个表中显示每页的下拉框og记录和导出按钮，而不是使用“lBfrtip”。

$(document).ready(function() {
        $('#example').DataTable( {
            dom: 'lBfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ]
        } );
    } );

Answer 4

如果要同时使用按钮和显示行条目列表，请使用此脚本。

$('#example').DataTable( {
    dom: 'lBfrtip',
    buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ]
} );

Answer 5

代替使用Bfrtip，可以使用Blfrtip添加了L（小写字母）来同时启用导出按钮和数据显示记录/条目。

显示每页的记录下拉以及数据表上的导出按钮

5 个答案: