Datatables 2.0：如何用layout实现默认控件的自定义并排布局

Datatables 2.0 弃用了旧版的dom字符串配置，改用结构化的layout对象。要实现页长、按钮、搜索控件的并排布局，只需在layout配置中给对应区块嵌套Bootstrap的row和col类即可，具体操作如下：

核心配置思路 #

通过layout对象中各区块的container属性，给外层容器添加row类，给每个控件所在的子容器添加col-*类，利用Bootstrap的栅格系统实现横向并排。

完整代码示例 #

$('#example').DataTable({
  layout: {
    top: {
      // 外层容器用Bootstrap的row类，加mb-3控制上下间距
      container: 'row mb-3',
      // 将top区域拆分为三个子区块，每个子区块用col-md-4平分宽度
      items: [
        {
          type: 'length', // 页长选择控件
          container: 'col-md-4'
        },
        {
          type: 'buttons', // 功能按钮组
          container: 'col-md-4',
          buttons: ['copy', 'excel']
        },
        {
          type: 'search', // 搜索框控件
          container: 'col-md-4'
        }
      ]
    },
    // 底部区域也可按同样逻辑配置
    bottom: {
      container: 'row',
      items: [
        { type: 'info', container: 'col-md-6' },
        { type: 'paging', container: 'col-md-6' }
      ]
    }
  }
});

细节优化 #

• 可按需调整col-*类分配宽度，比如让搜索控件占比更大：将搜索的container改为col-md-6，页长和按钮各用col-md-3
• 若控件垂直对齐不一致，可给容器添加Bootstrap对齐类，确保控件居中：

  {
    type: 'length',
    container: 'col-md-4 d-flex align-items-center'
  }
  

内容的提问来源于stack exchange，提问作者Julian B.