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

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

如果我没有错，您希望同时显示 pagelength 和 export 按钮。按照我的说法，除了本地导出按钮之外，您实际上可以使用以下代码获得真正漂亮的按钮单击下拉菜单，而不是使用本机下拉菜单。您只需要传递 'pageLength' 参数以使用附加按钮初始化 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。你可以在这里找到