如何将DataTable长度选择、分页及HTML按钮上下单行右对齐并调整页信息位置

嘿，刚好我之前也折腾过类似的DataTables布局需求，给你分享下可行的解决方案：

一、让长度选择器、分页组件和自定义按钮对齐同一行 #

DataTables的默认布局会把这些元素分散在不同行，我们可以通过自定义dom参数配合CSS来实现同行布局，这里我用Bootstrap栅格做响应式对齐，你也可以根据自己的样式调整：

1. 初始化DataTables时配置dom和buttons #

$(document).ready(function() {
    $('#example').DataTable({
        // 自定义dom结构：l=长度选择器，B=按钮，p=分页，t=表格
        dom: '<"top-controls row"<"col-sm-4"l><"col-sm-4 text-center"B><"col-sm-4 text-right"p>>' +
             '<"table-container"t>' +
             '<"bottom-controls row"<"col-sm-4"l><"col-sm-4 text-center"B><"col-sm-4 text-right"p>>',
        // 配置自定义HTML按钮
        buttons: [
            {
                text: '导出数据',
                action: function ( e, dt, node, config ) {
                    // 你的按钮逻辑
                    alert('导出按钮被点击');
                }
            },
            {
                text: '刷新表格',
                action: function ( e, dt, node, config ) {
                    dt.ajax.reload();
                }
            }
        ],
        // 开启分页和长度选择器
        paging: true,
        lengthChange: true,
        pageLength: 10
    });
});

2. 补充CSS调整间距（可选） #

如果默认间距不太理想，可以加一点自定义样式：

.top-controls, .bottom-controls {
    margin: 15px 0;
}
.top-controls .dt-buttons, .bottom-controls .dt-buttons {
    margin: 0;
}

这样顶部和底部的长度选择器、按钮、分页组件就会在同一行均匀分布了。

二、在表头前和表尾后显示页面信息 #

DataTables默认的信息（比如“显示1到10条，共50条”）是固定位置的，我们可以通过回调函数手动把信息插入到指定位置：

1. 先在HTML里预留位置 #

<!-- 表头前的信息容器 -->
<div id="top-info" class="alert alert-info" style="display:none;"></div>

<table id="example" class="table table-striped table-bordered" style="width:100%">
    <!-- 表格内容 -->
    <thead>
        <tr>
            <th>姓名</th>
            <th>职位</th>
            <th>办公室</th>
            <th>年龄</th>
            <th>入职日期</th>
            <th>薪资</th>
        </tr>
    </thead>
    <!-- ... 表格tbody和tfoot -->
</table>

<!-- 表尾后的信息容器 -->
<div id="bottom-info" class="alert alert-info" style="display:none;"></div>

2. 在DataTables初始化时添加回调函数 #

$(document).ready(function() {
    var table = $('#example').DataTable({
        // 前面的dom、buttons等配置保持不变
        // ...
        // 每次表格绘制完成后更新信息
        fnDrawCallback: function() {
            var info = this.api().page.info();
            var infoText = `显示第 ${info.start + 1} 到 ${info.end} 条数据，共 ${info.recordsTotal} 条`;
            
            // 更新表头前的信息
            $('#top-info').text(infoText).show();
            // 更新表尾后的信息
            $('#bottom-info').text(infoText).show();
        }
    });
});

这样每次表格分页、搜索或者刷新时，顶部和底部的信息都会自动更新。

三、核心思路总结 #

• 控件同行：通过dom参数自定义元素的包裹结构，配合CSS布局实现元素在同一行排列；
• 信息位置：利用DataTables的绘制回调函数，获取表格分页信息后插入到自定义的容器中。

如果你的项目没用Bootstrap，只需要把栅格类换成自己的CSS布局类就行，核心逻辑是通用的。

内容的提问来源于stack exchange，提问作者vijaya Tarle