Buttons提供一套给用户添加自定义按钮的特性,让按钮看起来和表格是一个整体。
Buttons提供了一些基本的按钮,比如打印,导出之类的按钮,也提供了API让用户自己扩展按钮,触发自定义的操作。
Buttons 有 四个核心组件 ,他们是独立的,你可以自己组合自己需要的插件。
你可以很方便的得到和使用Buttons扩展,在 Download 页面 上你选择你需要的插件,构建成一个js和css,定制自己的js。 你还可以在 release 页面上查看单个文件,引用到项目中、 在 packages 页面上下载已发打好的包或者从 Github-Buttons 页面上直接下载源码。
Buttons初始化有两种不同的方式:
buttonsOption
选项
new
来初始化
作为Datatables构造器的一部分,
buttonsOption
选项接受一个数组类型的数据来配置按钮,这通常是按钮的名字,你可以自定义按钮的动作
1 2 3 4 5 | $( '#myTable' ).DataTable( { buttons: [ 'copy' , 'excel' , 'pdf' ] } ); |
使用这个方式初始化话,你需要使用
domOption
选项告诉Datatables在那个地方显示你的按钮-看下面
buttonsOption
选项可以作为一个对象给按钮的行为提供更多控制。具体参考文档里的细节
使用 new $.fn.dataTable.Buttons
来创建buttons实例。这个方法接受两个参数:
buttonsOption
选项一样 )
1 2 3 4 5 6 7 | var table = $( '#myTable' ).DataTable(); new $.fn.dataTable.Buttons( table, { buttons: [ 'copy' , 'excel' , 'pdf' ] } ); |
这个方法特别实用,当你使用到多个表格实例,但是按钮是同样的,那么按钮只需要初始化一次,就可以用在多个表格上了
当你创建了按钮,那么你需要指定按钮的显示位置,便于用户操作,这里有两种方式可以指定按钮的显示位置:
domOption
- Datatables的dom控制参数
Datatables有一些表格控制元素可以使用。这些参数可能会有些疑惑,但是简单的说,
每一个字母代表的是Datatables的一个特性。对于Buttons来说,用字符 B
代表
1 2 3 4 5 6 | $( '#myTable' ).DataTable( { dom: 'Bfrtip' , buttons: [ 'copy' , 'excel' , 'pdf' ] } ); |
使用
buttons().container()API
方法获得jquery对象,然后往里面插入按钮:
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() ) ); |
Buttons 提供下面这些特性:
Translation from DataTables.net, with permission