DataTables
高级交互
表格功能。
编辑器
全面的编辑
用于 DataTables 的库。
手册
下载
≡ 显示站点导航

按钮选项

此扩展现已弃用，并已由 按钮 和 选择 扩展替代。保留文档仅供遗留参考。新项目应优先使用 按钮 和 选择，而不是 TableTools。

在使用 TableTools 时，您经常希望修改预定义按钮的行为，以匹配网站或 web 应用程序所需的交互。这是通过使用 TableTools 提供的每种按钮类型的选项来实现的。TableTools 内置了多种按钮类型：flash、打印、文本、ajax 和集合，每种类型都有其自己的属性，如下所述。

  • 通用选项
  • Ajax 选项
  • 集合选项
  • Flash 选项
  • 打印选项
  • 文本选项

修改 TableTools 中按钮属性的基本原则是定义基于预定义类型之一的自定义按钮并对其进行扩展（根据需要覆盖默认属性）。在下面的示例中，我们通过扩展“文本”预定义按钮并设置其文本来创建一个新按钮，但保持所有其他属性不变。

通用选项（应用于所有按钮类型）

fnCellRender
显示详细信息 		用于修改已通过 fnGetTableData API 方法（用于导出数据）从表中读取的数据。这允许在导出数据之前对数据进行预处理 - 例如剥离 HTML 的某些部分或追加其他数据。
默认值
输入参数
  1. * - 来自单元格数据的值
  2. int - 读取的列数
  3. node - 行的 TR 元素
  4. int - 行的内部 DataTables 缓存索引（基于 fnGetPosition）
返回参数 要导出的数据
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "fnCellRender": function ( sValue, iColumn, nTr, iDataIndex ) { // 如果是第 5 列，则将文本“TableTools”附加到该列 if ( iColumn === 5 ) { return sValue +" TableTools"; } return sValue; } } ] } } ); } );
fnClick
显示详细信息 		当用户单击按钮时触发的回调函数。
默认值
输入参数
  1. node - 激活回调的按钮元素
  2. object - 按钮定义对象，包含按钮的所有初始化属性。
  3. object - 用于控制 Flash 按钮的 Zeroclipboard 实例。请注意，对于非基于 flash 的按钮，此项将指定为 null。
返回参数 void
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "fnClick": function ( nButton, oConfig, oFlash ) { alert( 'Mouse click' ); } } ] } } ); } );
fnComplete
显示详细信息 		此回调函数会在按钮需要执行的任何操作完成后激活。它对于基于 Flash 的按钮特别有用，因为它是在 Flash 执行任何操作之后激活的（例如保存文件）。
默认值
输入参数
  1. node - 激活回调的按钮元素
  2. object - 按钮定义对象，包含按钮的所有初始化属性。
  3. object - 用于控制 Flash 按钮的 Zeroclipboard 实例。请注意，对于非基于 flash 的按钮，此项将指定为 null。
  4. 字符串 - 从 Flash 动画剪辑返回的文本。
返回参数 void
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "fnComplete": function ( nButton, oConfig, oFlash, sFlash ) { alert( '按钮操作完成' ); } } ] } } ); } );
fnInit
显示详细信息 		在按钮由 TableTools 代码创建和初始化时调用的回调函数。在它被插入到 DOM 中之前，这允许对按钮进行修改（例如添加一个类）。
默认值
输入参数
  1. node - 激活回调的按钮元素
  2. object - 按钮定义对象，包含按钮的所有初始化属性。
返回参数 void
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "fnInit": function ( nButton, oConfig ) { alert( '按钮初始化' ); } } ] } } ); } );
fnMouseout
显示详细信息 		当鼠标离开按钮时的回调函数。
默认值
输入参数
  1. node - 激活回调的按钮元素
  2. object - 按钮定义对象，包含按钮的所有初始化属性。
  3. object - 用于控制 Flash 按钮的 Zeroclipboard 实例。请注意，对于非基于 flash 的按钮，此项将指定为 null。
返回参数 void
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "fnMouseout": function ( nButton, oConfig, oFlash ) { alert( '鼠标移出' ); } } ] } } ); } );
fnMouseover
显示详细信息 		当鼠标悬停在按钮上时的回调函数。
默认值
输入参数
  1. node - 激活回调的按钮元素
  2. object - 按钮定义对象，包含按钮的所有初始化属性。
  3. object - 用于控制 Flash 按钮的 Zeroclipboard 实例。请注意，对于非基于 flash 的按钮，此项将指定为 null。
返回参数 void
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "fnMouseover": function ( nButton, oConfig, oFlash ) { alert( '鼠标移入' ); } } ] } } ); } );
fnSelect
显示详细信息 		在表格中选择一行时调用的函数。当表格行选择状态发生变化时，这允许对按钮执行操作（例如添加和删除类）。
默认值
输入参数
  1. node - 激活回调的按钮元素
  2. object - 按钮定义对象，包含按钮的所有初始化属性。
  3. 节点 - 单击的 TR 行节点。
返回参数 void
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "fnSelect": function ( nButton, oConfig, nRow ) { alert( '行选中' ); } } ] } } ); } );
oSelectorOpts
显示详细信息 		控制要从源 DataTables 中使用的数据。DataTables 可以通过其 $ API 方法选择要使用的行以及使用的顺序。此选项还为 TableTools 导出按钮提供了该功能，因此您只能导出当前数据（例如）。
默认值
类型 对象
代码示例 
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
    "aButtons": [
        {
            "sExtends": "copy",
            "sButtonText": "Copy to clipboard",
            "oSelectorOpts": {
                page: 'current'
            }
        }
    ]
}
} );
sAction
显示详细信息 		动作告诉 TableTools 新创建的按钮应该被视为哪种按钮 - 可以使用该按钮执行的操作将取决于此设置。它可以是以下之一："flash_save"、"flash_copy"、"flash_pdf"、"print"、"text" 或 "collection"。
默认值
类型 字符串
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "xls", "sAction": "flash_save" } ] } } ); } );
sButtonClass
显示详细信息 		在非鼠标悬停状态下设置按钮的类。
默认值
类型 字符串
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sButtonClass": "my_button_class" } ] } } ); } );
sButtonText
显示详细信息 		将按钮的文本设置为自定义字符串。
默认值
类型 字符串
代码示例 $(document).ready( 函数 () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sButtonText": "保存 CSV 文件！" } ] } } ); } );
sExtends
显示详细信息 		通常有用到预定义按钮并根据需要扩展它们。此属性应该与预定义按钮之一匹配，以提供完全相同的按钮。
默认值
类型 字符串
代码示例 $(document).ready( 函数 () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "sButtonText": "Hello world" } ] } } ); } );

Ajax 按钮选项

bFooter
显示详细信息 		将页脚包含在导出数据中，或不包含。
默认值 true
类型 布尔值
代码示例 $(document).ready( 函数 () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "ajax", "bFooter": false } ] } } ); } );
bHeader
显示详细信息 		将页眉包含在导出数据中，或不包含。
默认值 true
类型 布尔值
代码示例 $(document).ready( 函数 () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "ajax", "bFooter": false } ] } } ); } );
fnAjaxComplete
显示详细信息 		这是在 Ajax 加载完成后调用的方法。它在 Ajax 按钮的 fnClick 函数中定义。
默认值
输入参数 根据 $.ajax()
返回参数 void
代码示例 $(document).ready( 函数 () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "ajax", "fnAjaxComplete": 函数 ( XMLHttpRequest, textStatus ) { 提醒 ( 'Ajax 完成' ); } } ] } } ); } );
mColumns
显示详细信息 		此参数定义哪些列应该用作导出的数据源。该参数可以是值为 'all'、'visible' 或 'hidden' 的字符串 - 或一个包含要导出的列索引的整数数组。此外，自 TableTools 2.2.3 开始，它也可以是一个返回要包含在输出中的列索引数组的函数。此函数接受一个参数，即 DataTables 设置对象，可用于获取 API 实例。
默认值 all
类型 混合 (字符串、整数数组或函数)
代码示例 $(document).ready( 函数 () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "ajax", "sButtonText": "特殊列", "mColumns": [ 0, 1, 4 ] }, { "sExtends": "ajax", "sButtonText": "可见列", "mColumns": "visible" } ] } } ); } ); $(document).ready(函数() { $('#example').DataTable( { dom: 'T<"clear">lfrtip', tableTools: { aButtons: [ { sExtends: 'copy', mColumns: 函数 ( ctx ) { var api = new $.fn.dataTable.Api( ctx ); return api.columns( '.selected' ).indexes().toArray(); } } ] } } ); } );
sAjaxUrl
显示详细信息 		此参数是 Ajax 按钮的默认 'fnClick' 函数使用的，它定义 Ajax 请求应该发送到的位置。
默认值 /xhr.php
类型 字符串
代码示例 $(document).ready( 函数 () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "ajax", "sAjaxUrl": "remote.php" } ] } } ); } );
sFieldBoundary
显示详细信息 		设置 CSV 字段的边界字符。通常你希望这是单引号，但更改它可能很有用。
默认值 '
类型 字符串
代码示例 $(document).ready( 函数 () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "ajax", "sFieldBoundary": '"' } ] } } ); } );
sFieldSeperator
显示详细信息 		定义用作 CSV 字段字段分隔符的字符。通常这是逗号...
默认值 ,
类型 字符串
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "ajax", "sFieldSeperator": "-" } ] } } ); } );

组合按钮选项

aButtons
显示详细信息 		TableTools 中的组合是一个特殊的按钮，当激活后将显示包含“子按钮”的下拉列表。子按钮是由 aButtons 阵列定义的，并采用与顶层按钮完全相同的参数选项。
默认值
类型 阵列
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ "copy", "print", { "sExtends": "collection", "sButtonText": "Save", "aButtons": [ "csv", "xls", "pdf" ] } ] } } ); } );

Flash 按钮选项

bBomInc
显示详细信息 		定义是否要在文件开头包含字节顺序标记 (BOM)。
默认值
类型 布尔值
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "bBomInc": true } ] } } ); } );
bFooter
显示详细信息 		将页脚包含在导出数据中，或不包含。
默认值
类型 布尔值
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "bFooter": false } ] } } ); } );
bHeader
显示详细信息 		是否在导出中包含表格标题。
默认值
类型 布尔值
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "bHeader": false } ] } } ); } );
bSelectedOnly
显示详细信息 		当此选项设置为 true 时，从表格中收集的数据将仅来自最终用户选择的行（使用 sRowSelect 选项）——所有其他数据都将被舍弃（即，不用于保存/复制）。如果未选择任何行，则将使用所有数据。
默认值 false
类型 布尔值
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "sRowSelect": "multi", "aButtons": [ { "sExtends": "csv", "bSelectedOnly": true } ] } } ); } );
mColumns
显示详细信息 		此参数定义哪些列应作为导出的数据源。此参数可以是一个值为“all”、“visible”、“hidden”或“sortable”的字符串，或是一个包含要导出的列索引的整数数组。
默认值
类型 混合（字符串或整数数组）
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sButtonText": "Special columns", "mColumns": [ 0, 1, 4 ] }, { "sExtends": "csv", "sButtonText": "Visible columns", "mColumns": "visible" } ] } } ); } );
sCharSet
显示详细信息 		此参数定义了要使用的已保存文件的字符集。它可以使用“utf8”或“utf16le”二者之一的值。通常，您需要使用“utf8”，但是“utf16le”对于保存由 Excel 读取的文件非常有用。
默认值
类型 字符串
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sCharSet": "utf16le" } ] } } ); } );
sFieldBoundary
显示详细信息 		设置 CSV 字段的边界字符。通常你希望这是单引号，但更改它可能很有用。
默认值
类型 字符串
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sFieldBoundary": '"' } ] } } ); } );
sFieldSeperator
显示详细信息 		定义用作 CSV 字段字段分隔符的字符。通常是逗号（因此才有名称 CSV！）。
默认值
类型 字符串
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sFieldSeperator": "-" } ] } } ); } );
sFileName
显示详细信息 		此参数定义要保存的文件的名称。如果存在 HTML 文档的“TITLE”标签，则特殊字符“*”将由它取代。否则，您可以使用此参数定义要使用的文件名。
默认值
类型 字符串
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sFileName": "TableTools - *.csv" } ] } } ); } );
sNewLine
显示详细信息 		定义用于表示已导出数据中换行符的字符。可以使用特殊字符串“auto”自动检测应使用哪个换行符（即 Windows 中的 \r\n，其他所有内容中的 \n）。
默认值
类型 字符串
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sNewLine": "auto" } ] } } ); } );
sPdfMessage
显示详细信息 		可用于向 PDF 导出添加自定义描述/摘要的自由文本输入。
默认值 空字符串
类型 字符串
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ "copy", "csv", "xls", { "sExtends": "pdf", "sPdfMessage": "您的自定义消息将显示在此处。" } "print" ] } } ); } );
sPdfOrientation
显示详细信息 		设置 PDF 输出的纸张方向。
默认值 portrait
类型 字符串（'landscape' 或 'portrait'）
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ "copy", "csv", "xls", { "sExtends": "pdf", "sPdfOrientation": "landscape" } "print" ] } } ); } );
sPdfSize
显示详细信息 		设置用于 PDF 保存文件中的纸张大小。
默认值 A4
类型 字符串 - 'A[3-4]'、'letter'、'legal' 或 'tabloid'
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ "copy", "csv", "xls", { "sExtends": "pdf", "sPdfSize": "letter" } "print" ] } } ); } );
sTitle
显示详细信息 		设置已保存文档的标题/文件名。对于 PDF 文件，此标题显示在文档顶部（如果给定，则显示在 sMessage 文本之上）。如果给定为空字符串，则 TableTools 将使用 HTML 文档中的 TITLE 标签。
默认值
类型 字符串
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ "copy", "csv", "xls", { "sExtends": "pdf", "sTitle": "我的标题" } "print" ] } } ); } );
sToolTip
显示详细信息 		为按钮定义 'title' 属性，这样浏览器就可以将其显示为标准工具提示显示的一部分（通常是一个小小的黄色悬停框）。
默认值
类型 字符串
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sToolTip": "另存为 CSV" } ] } } ); } );

打印按钮选项

bShowAll
显示详细信息 		可以使用此参数来让 TableTools 仅显示当前页（false）或表中的所有记录（true）。
默认值 true
类型 布尔值
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "print", "bShowAll": false } ] } } ); } );
sInfo
显示详细信息 		在开始打印显示时，TableTools 将向最终用户显示一条信息，告知他们发生了什么事以及如何退出。可以通过此参数更改此消息。
默认值
打印视图

请使用浏览器的打印功能打印此表格。完成后，按 Escape。
类型 字符串
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "print", "sInfo": "完成后，请按 Escape" } ] } } ); } );
sMessage
显示详细信息 		可以使用此参数让 TableTools 在打印显示的顶部放置一条信息（例如版权消息或标题）。
默认值
类型 字符串
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "print", "sMessage": "由 DataTables 生成" } ] } } ); } );

文本按钮选项

bFooter
显示详细信息 		将页脚包含在导出数据中，或不包含。
默认值 true
类型 布尔值
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "bFooter": false } ] } } ); } );
bHeader
显示详细信息 		将页眉包含在导出数据中，或不包含。
默认值 true
类型 布尔值
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "bHeader": false } ] } } ); } );
mColumns
显示详细信息 		此参数定义哪些列应作为用于导出的数据源。该参数可以是值分别为 'all'、'visible' 或 'hidden' 和要导出的列索引的整数数组的字符串。
默认值 all
类型 混合（字符串或整数数组）
代码示例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sButtonText": "Special columns", "mColumns": [ 0, 1, 4 ] }, { "sExtends": "csv", "sButtonText": "Visible columns", "mColumns": "visible" } ] } } ); } );
页面导航

数据表格

数据表格由 SpryMedia Ltd 设计和创建。
© 2007-2024 MIT 许可。 隐私政策。 支持。
SpryMedia Ltd 在苏格兰注册，公司编号为 SC456502。