布局

定义并放置将出现在页面上的表格控制元素。

说明

layout 选项提供控制 DataTable 周围及其控制项的能力。在提供一系列选项控制表格周围布局的同时，此选项的基本操作非常简单：使用对象参数名称放置控制，然后使用值来说明要显示的功能及其配置。

让我们从默认值开始

{
    topStart: 'pageLength',
    topEnd: 'search',
    bottomStart: 'info',
    bottomEnd: 'paging'
}

您会看到它会在 DataTable 的四个角上放置一个不同的 功能。定义了两行 - 顶部和底部，每行都使用开始和结束。

要使用不同的功能替换功能（例如 Buttons 扩展），只需设置值以匹配所需功能。同样，如果您希望移除功能，请将其设置为 null。例如，在下面，我们将顶部行设置为了仅包含 Buttons 扩展（另请注意底部行会自动采用默认值）

{
    topStart: 'buttons',
    topEnd: null
}

位置名称

如您所见，layout 对象中参数的名称会告知 DataTables 在哪里放置此功能。它由三部分组成

• top 或 bottom - 指示功能显示在表格上方还是下方
• 一个数字（可选） - 允许在布局网格中使用多行。如果省略，它将出现在表格旁边。
• Start 或 End（可选） - 指示功能应出现在行的开头还是结尾。如果省略，它会占据容器的整个宽度。

如果您以正则表达式考虑，那么此形式定义为 (top|bottom)[0-9]*(Start|End)?。

布局网格

DataTables 为 layout 创建的布局网格如下所示

请记住，布局网格中的各个条目都是选项。将值设置为 null 或 undefined 以使其不出现。

此示例 可能会很有用，如果您想直观地看到网格布局。

值

到目前为止，我们仅讨论了功能的位置，但现在让我们考虑定义功能及其配置的值。功能 是以某种方式与 DataTable 进行交互的控件元素。

layout 中参数的值可以是以下任何一个

• string- 表示由 DataTables 或一个插件提供的功能（示例）的字符串。内置功能如下：
  • info- 表格信息摘要
  • pageLength- 页面长度控件
  • paging- 用于分页的用户输入控件
  • search- 搜索输入框
  • div- 一个简单的占位符元素
• object- 一个简单的对象，其中的参数键是要使用的功能（请参阅上面的字符串以及任何插件），并且该值传给该功能（示例）。通常，这是一个带有选项列表的对象。请注意，可以使用单个对象指定多个功能，但无法保证顺序。如果您在单个时隙中指定多个控件，则通常顺序很重要 - 在这种情况下，请使用对象数组。
• object- 一个简单的对象，其中一个名为 features 的参数用于控制网格元素的 id 和 class（从 2.1 开始 - 示例）。请参阅下面的“ID 和类名”部分。
• jQuery- 一个包含要插入的节点的 jQuery 实例。
• node- 一个 DOM 元素（示例）。
• function- 返回一个 DOM 元素或一个包含节点的 jQuery 实例的函数（示例）。该函数将传递到 DataTables 设置对象中。
• object- 一个类实例，它提供一个 node() 方法，并应返回要插入的节点（DOM 或 jQuery）。与上述 function 选项一样，此方法将传递到表格的 DataTables 设置对象中。
• array- 以上任何选项的数组，提供在彼此相邻位置显示多个项目的能力（示例）。
• null- 此位置不显示任何内容

考虑以下示例作为配置表格控件功能的最常见方式：

new DataTable('#example', {
    layout: {
        topStart: 'info',
        topEnd: {
            search: {
                placeholder: 'Search'
            }
        }
    }
});

• 第 3 行：将 info 信息功能放置在表格的左上角 (lrt)。
• 第 4-8 行：将 search 输入放置在右上角 (ltr)，并配置 search.placeholder 选项。

更多示例见下方，也可在 示例的布局部分 中找到。

ID 和类名

DataTables 会自动为布局网格分配符合你正在使用的样式框架的类名，但自 2.1 起，你也可以为创建的元素指定你自己的 ID 和类名。为此，我们在 对象 的第二种类型中使用了 layout，其中包含一个 features 数组属性。

带有 features 属性的对象允许你指定行 id/类和单元格 id/类以及功能。作为 TypeScript 接口，该对象如下所示

interface {
/** Class to apply to the CELL in the layout grid */
className?: string;

/** Id to apply to the CELL in the layout grid */
id?: string;

/** Class to apply to the ROW in the layout grid */
rowClass?: string;

/** Id to apply to the ROW in the layout grid */
rowId?: string;

/** List of features to show in this cell */
features: Features[];
}

如果我们考虑一个单字符串布局，如 top: 'info'，则这与以下内容相同

top: {
    features: ['info']
}

同样，如果我们有需要配置的功能，如前一个示例中的 search，它可以写成

topEnd: {
    features: {
        search: {
            placeholder: 'Search'
        }
    }
}

从那里，你将看到如何使用 id、className 和其他属性来控制用于网格布局的类/id。

请注意，如果你确实使用此表单控制类名，它将 替换默认类名，即你定义的类是该元素上的唯一类。

请参阅 此示例，了解如何使用这些属性和技术。

类型

此选项可以在以下类型中指定

• 对象

默认值

DataTables 的默认布局为

{
    topStart: 'pageLength',
    topEnd: 'search',
    bottomStart: 'info',
    bottomEnd: 'paging'
}

请注意，如果你将默认对象中使用的其中一个功能分配到不同位置，它不会从其原始位置自动删除。例如，要仅在 topStart 位置显示 search 功能，你需要使用

{
    topStart: 'search',
    topEnd: null
}

示例

new DataTable('#myTable', {
	layout: {
		topStart: null
	}
});

// Sets to show paging feature below the table only
DataTable.defaults.layout = {
	topStart: null,
	topEnd: null,
	bottomStart: null,
	bottomEnd: null,
	bottom: 'paging'
};

new DataTable('#myTable');

// Remove the defaults
DataTable.defaults.layout = {
	topStart: null,
	topEnd: null,
	bottomStart: null,
	bottomEnd: null
};

new DataTable('#myTable', {
	top: ['pageLength', 'search'],
	bottom: ['info', 'paging']
});

new DataTable('#example', {
	layout: {
		topStart: {
			pageLength: {
				menu: [ 10, 25, 50, 100 ]
			}
		},
		topEnd: {
			search: {
				placeholder: 'Type search here'
			}
		},
		bottomEnd: {
			paging: {
				numbers: 3
			}
		}
	}
});

new DataTable('#example', {
	layout: {
		top2Start: 'pageLength',
		top2End: 'search',
		topStart: 'info',
		topEnd: 'paging',
		bottomStart: 'pageLength',
		bottomEnd: 'search',
		bottom2Start: 'info',
		bottom2End: 'paging'
	}
});

new DataTable('#example', {
	layout: {
		topStart: function () {
			let toolbar = document.createElement('div');
			toolbar.innerHTML = '<b>Custom tool bar! Text/images etc.</b>';

			return toolbar;
		}
	}
});