buttons概念Buttons添加自定义按钮的官方教程：buttons依赖

按钮概念

按钮为用户提供了一组用于添加自定义按钮的功能，以使这些按钮看起来与表单一样完整。

按钮提供了一些基本按钮，例如打印和导出按钮，还提供了API供用户扩展按钮本身并触发自定义操作。

在数据表中显示数据时，对于最终用户，他们可以从数据表中获取数据并将其提取到文件中以供本地使用。这可以通过基于HTML5的按钮或Flash按钮来完成。

按钮按钮具有四个核心组件（复制，csv，excel，pdf），它们是独立的，您可以组合所需的插件。它可以自动检测浏览器的功能和软件的可用性-如果可能，它们将自动使用HTML5按钮，如果不满足要求，它们将自动返回Flash，最后不会显示。

此插件的官方教程：

此插件的官方目录：

按钮依赖性

1. jqeury相关的JS

2.与数据表相关的JS

3.要导出的与文件相关的JS

按钮初始化

按钮可以通过两种不同的方式初始化：

●初始化数据表时，使用buttonOption选项

●通过新的方式初始化

（需要注意的是，可以将多个Button实例用作同一数据表。这非常有用，例如将按钮放在表的上方和下方）

使用数据表（在数据表中）

作为Datatables构造函数的一部分，buttonsOption选项接受数据数组来配置按钮。这通常是按钮的名称。您可以自定义按钮的操作。

$(#myTable).DataTable( {
    buttons: [
        copy, excel, pdf
    ]
} );

构造函数

使用新的$ .fn.dataTable.Buttons创建按钮的实例。此方法接受两个参数：

-DT实例对象

-按钮选项（与buttonsOption选项相同）

var table = $(#myTable).DataTable();
new $.fn.dataTable.Buttons( table, {
    buttons: [
        copy, excel, pdf
    ]
} );

按钮位置显示

创建按钮时，需要指定按钮的显示位置，以方便用户操作。有两种方法可以指定按钮的显示位置：

●dom（选项）-Datatables dom控制参数

●直接使用API​​

1. Dom参数（dom参数）

数据表具有一些可以使用的表控制元素。这些参数可能有些混乱，但是简单地说，每个字母代表Datatables的功能。对于“按钮”，请使用字符B表示

$(#myTable).DataTable( {
    dom: Bfrtip,
    buttons: [
        copy, excel, pdf
    ]
} );

可以找到dom选项的具体信息：

2.直接插入（直接插入）

使用button（）。container（）API方法获取jquery对象，然后将按钮插入其中：

buttonsOption方法

var table = $(#example).DataTable( {
    buttons: [
        copy, excel, pdf
    ]
} );
table.buttons().container()
    .appendTo( $(.col-sm-6:eq(0), table.table().container() ) );

新方法

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() ) );

excel

正式文件：

相关的JS依赖项：

1. jqeury相关的JS

<script src="../../lib/jquery-1.12.4.js">script>

2.与数据表相关的JS

3.要导出的与文件相关的JS

<script src="../../lib/dataTables/dataTables.buttons.min.js">script>
<script src="../../lib/dataTables/jszip.min.js">script>
<script src="../../lib/dataTables/buttons.html5.min.js">script>

上述某些条件是必须的，而某些则不是必需的

示例：

代码：

$(#myTable).DataTable( {
    buttons: [
       extend: excelHtml5, //导出文件格式为excel
            text: 导出,  //按钮标题
            title: XXX- + start_date + "-" + end_date, //导出的excel标题
            className: btn btn-primary, //按钮的class样式
            exportOptions:{ //从DataTable中选择要收集的数据。这包括列、行、排序和搜索的选项。请参阅button.exportdata()方法以获得完整的详细信息——该参数所提供的对象将直接传递到该操作中，以收集所需的数据，更多options选项参见：https://datatables.net/reference/api/buttons.exportData()
                format: { //用于导出将使用的单元格格式化函数的容器对象 format有三个子标签，header，body和foot
                    body: function ( data, row, column, node ) { //body区域的function，可以操作需要导出excel的数据格式
                        if(column === 4 && (data == null || data == "" || data == "0%")){
                            return 0;
                        }
                        else{
                            return data;
                        }
                    }
                }
            }
    ]
} );

更多按钮扩展教程：

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-359580-1.html