Buttons

Buttons提供一套给用户添加自定义按钮的特性,让按钮看起来和表格是一个整体。

Buttons提供了一些基本的按钮,比如打印,导出之类的按钮,也提供了API让用户自己扩展按钮,触发自定义的操作。

Buttons 有 四个核心组件 ,他们是独立的,你可以自己组合自己需要的插件。

下载(Download)

你可以很方便的得到和使用Buttons扩展,在 Download 页面 上你选择你需要的插件,构建成一个js和css,定制自己的js。 你还可以在 release 页面上查看单个文件,引用到项目中、 在 packages 页面上下载已发打好的包或者从 Github-Buttons 页面上直接下载源码。

初始化(Initialisation)

Buttons初始化有两种不同的方式:

需要重点注意的是,多个Buttons实例可以被用作同一个Datatables。这是非常有用的,比如在表格上面和表格下面都放有按钮。

使用DataTables(In DataTables)

作为Datatables构造器的一部分, buttonsOption 选项接受一个数组类型的数据来配置按钮,这通常是按钮的名字,你可以自定义按钮的动作

1
2
3
4
5
$('#myTable').DataTable( {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );

使用这个方式初始化话,你需要使用 domOption 选项告诉Datatables在那个地方显示你的按钮-看下面

buttonsOption 选项可以作为一个对象给按钮的行为提供更多控制。具体参考文档里的细节

构造器(Constructor)

使用 new $.fn.dataTable.Buttons来创建buttons实例。这个方法接受两个参数:

1
2
3
4
5
6
7
var table = $('#myTable').DataTable();
 
new $.fn.dataTable.Buttons( table, {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );

这个方法特别实用,当你使用到多个表格实例,但是按钮是同样的,那么按钮只需要初始化一次,就可以用在多个表格上了

按钮显示(Displaying the buttons)

当你创建了按钮,那么你需要指定按钮的显示位置,便于用户操作,这里有两种方式可以指定按钮的显示位置:

Dom参数(dom parameter)

Datatables有一些表格控制元素可以使用。这些参数可能会有些疑惑,但是简单的说, 每一个字母代表的是Datatables的一个特性。对于Buttons来说,用字符 B代表

1
2
3
4
5
6
$('#myTable').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );

直接插入(Direct insertion)

使用 buttons().container()API 方法获得jquery对象,然后往里面插入按钮:

buttonsOption 方式

1
2
3
4
5
6
7
8
var table = $('#example').DataTable( {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );
 
table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );

new 的方式

1
2
3
4
5
6
7
8
9
10
var table = $('#myTable').DataTable();
 
new $.fn.dataTable.Buttons( table, {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );
 
table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );

特性(Features)

Buttons 提供下面这些特性:

http://datatables.net/extensions/buttons/

Translation from DataTables.net, with permission