buttons概念

Buttons提供一套給使用者新增自定義按鈕的特性，讓按鈕看起來和表格是一個整體。

Buttons提供了一些基本的按鈕，比如列印，匯出之類的按鈕，也提供了API讓使用者自己擴充套件按鈕，觸發自定義的操作。

當在DataTable中顯示資料時，對於終端使用者來說，他們有能力從DataTable中獲取資料，並將其提取到一個檔案中，以便他們在本地使用。這可以用基於HTML5的按鈕或Flash按鈕來完成。
buttons按鈕有四個核心元件（copy，csv，excel，pdf），他們是獨立的，你可以自己組合自己需要的外掛。可以自動檢測瀏覽器的功能和軟體的可用性——如果可能的話，它們會自動使用HTML5按鈕，如果沒有滿足要求，它們會自動回到Flash中，最終不會顯示出來。

buttons依賴

1.jqeury相關JS
2.datatable相關JS
3.需要匯出的檔案相關JS

buttons初始化

Buttons初始化有兩種不同的方式：
● 在Datatables初始化時使用 buttonsOption 選項
● 通過 new 來初始化
（需要重點注意的是，多個Buttons例項可以被用作同一個Datatables。這是非常有用的，比如在表格上面和表格下面都放有按鈕）

1. 使用DataTables（In DataTables）
   作為Datatables構造器的一部分， buttonsOption 選項接受一個數組型別的資料來配置按鈕，這通常是按鈕的名字，你可以自定義按鈕的動作

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

1. 構造器(Constructor)
   使用 new $.fn.dataTable.Buttons來建立buttons例項。這個方法接受兩個引數：
   ——DT例項物件
   ——按鈕的選項(和 buttonsOption 選項一樣 )

var table = $('#myTable').DataTable();

new $.fn.dataTable.Buttons( table, {
    buttons: [
        'copy'
 
, 'excel', 'pdf'
    ]
} );

buttons位置顯示

當你建立了按鈕，那麼你需要指定按鈕的顯示位置，便於使用者操作，這裡有兩種方式可以指定按鈕的顯示位置：
● dom（Option） - Datatables的dom控制引數
● 直接使用API

1.Dom引數（dom parameter）
Datatables有一些表格控制元素可以使用。這些引數可能會有些疑惑，但是簡單的說， 每一個字母代表的是Datatables的一個特性。對於Buttons來說，用字元 B代表

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

2.直接插入（Direct insertion）
使用 buttons().container()API 方法獲得jquery物件，然後往裡面插入按鈕:

buttonsOption 方式

var table = $('#example').DataTable( {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );

table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );

new 的方式

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.datatable相關JS

<script src="../../lib/dataTables/jquery.dataTables.min.js"></script>
<script src="../../lib/dataTables/dataTables.bootstrap.min.js"></script>
<script src="../../lib/dataTables/dataTables.responsive.min.js"></script>

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;
                        }
                    }
                }
            }
    ]
} );