初始化
此扩展现在已停用,并已由 按钮 和 选择 扩展取代。文档仅保留供旧版参考。新项目应优先使用 按钮 和 选择,而不是表格工具。
表格工具的初始化通常与 DataTables 的初始化同时进行,通过 dom
和 tableTools
属性。表格工具的自定义是通过 tableTools
对象的属性完成的 - 完整的可用选项列表在前面提供。也可以直接初始化表格工具,这在您想要轻松引用实例或将工具栏放置在 DataTables DOM 结构之外时很有用。
DataTables 属性
tableTools 显示详情
|
要通过 DataTables 初始化对象自定义表格工具选项,您可以使用此参数。下面“初始化参数”部分中给出的任何选项都可以在此处使用。 |
默认 |
{} |
类型 |
对象 |
代码示例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sSwfPath": "/swf/copy_csv_xls_pdf.swf" } } ); } );
|
dom 显示详情
|
DataTables 中的 dom 参数用于在 DOM 中定位 DataTables 添加到表格的各种控件(过滤、分页等)。这将直接影响元素在显示中的位置,当与您的 CSS 结合使用时。表格工具可以通过在 dom 中插入字符 'T' 来包含。这对于初始化表格工具来说已经足够了 - 一切都是选项和自定义。 |
默认 |
lfrtip |
类型 |
字符串 |
代码示例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip' } ); } );
|
选项
aButtons 显示详情
|
此参数定义了表格工具将使用的按钮,并提供了表格工具自定义的主要焦点。在它的基本形式中,此数组的元素是与预定义按钮匹配的字符串,但元素也可以是定义您自己的按钮或覆盖默认操作的对象。这在 按钮 页面上得到充分解释。 |
默认 |
[ "copy", "csv", "xls", "pdf", "print" ] |
类型 |
数组 |
代码示例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "aButtons": [ "copy", "print" ] } } ); } );
|
fnPreRowSelect 显示详情
|
这是一个回调函数,在选择行之前触发(即鼠标按下已发生,但表格工具尚未选择行)。如果需要,它可以用来取消选择。 |
默认 |
|
输入参数 |
- event : 发生的点击事件以选择此行
- array - node : 要选择的 TR 元素
|
返回参数 |
Boolean - 如果可以选择行,则为 true,否则为 false。 |
代码示例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "fnPreRowSelect": function ( e, nodes ) { if ( e.currentTarget.className.indexOf('no_select') != -1 ) { return false; } return true; } } } ); } );
|
fnRowDeselected 显示详情
|
当取消选择行时调用的回调函数(即与 fnRowSelected 相反)。 |
默认 |
|
输入参数 |
- array - node : 取消选择的 TR 元素
|
返回参数 |
void |
代码示例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "fnRowDeselected": function ( nodes ) { alert( 'The row with ID '+nodes[0].id+' was deselected' ); } } } ); } );
|
fnRowSelected 显示详情
|
选择行时发生的回调函数。这允许在选择任何行时执行特定操作(例如,所选行的计数器)。 |
默认 |
|
输入参数 |
- array - node : 已选择的 TR 元素
|
返回参数 |
void |
代码示例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "fnRowSelected": function ( nodes ) { alert( 'The row with ID '+nodes[0].id+' was selected' ); } } } ); } );
|
sRowSelect 显示详情
|
表格工具提供了所有需要允许最终用户在表格中选择行(通过单击它们)的功能。默认情况下禁用此功能,但可以通过将此属性设置为“single”(仅允许一次选择表格中的一行)或“multi”(允许选择任意数量的行)来轻松启用它。 |
默认 |
none |
类型 |
字符串 |
代码示例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sRowSelect": "single" } } ); } );
|
sRowSelector 显示详情
|
默认情况下,当行选择处于活动状态时,表格工具将在单击表格中的任何元素时选择一行。将此选择限制在某些列,甚至行中的某些元素可能很有用,这可以通过此选项完成。这是一个简单的 jQuery 选择器字符串,用于选择将执行选择的元素。 |
默认 |
tr |
类型 |
字符串 |
代码示例 |
$(document).ready( function () { // Click on the row or all but the first column to select the row $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sRowSelector": "td:not(:first-child)" } } ); } );
|
sSelectedClass 显示详情
|
设置用于指示最终用户已选择行的类。 |
默认 |
DTTT_selected |
类型 |
字符串 |
代码示例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sRowSelect": "multi", "sSelectedClass": "row_selected" } } ); } );
|
sSwfPath 显示详情
|
定义表格工具用于复制到剪贴板和将文件本地保存操作的 SWF 路径。如果您在进行这些操作时遇到问题,但没有打印,则很可能是这个问题。 |
默认 |
media/swf/copy_csv_xls_pdf.swf |
类型 |
字符串 |
代码示例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sSwfPath": "/swf/copy_csv_xls_pdf.swf" } } ); } );
|
直接初始化
表格工具可以通过 $.fn.dataTable.TableTools
类直接初始化,也可以通过 DataTables dom
选项初始化。表格工具构造函数必须使用关键字 new
调用以创建新实例,并且接受两个参数
1 .DataTables 对象 - 要将表格工具附加到的 DataTables 实例(即它将获取数据源的地方)。2. 表格工具初始化选项 - 包含上面列表中选项的对象。
下面的示例展示了如何以这种方式初始化表格工具。请注意,您需要使用 fnContainer()
API 方法手动将表格工具创建的容器元素插入 DOM,并将返回的节点注入到您希望它在文档中显示的位置。下面的示例展示了将其插入到 #demo
元素之前。
$(document).ready( function () {
var table = $('#example').dataTable();
var tableTools = new $.fn.dataTable.TableTools( table, {
"buttons": [
"copy",
"csv",
"xls",
"pdf",
{ "type": "print", "buttonText": "Print me!" }
]
} );
$( tableTools.fnContainer() ).insertAfter('div.info');
} );