dataTable的按鈕有匯出功能，在初始化參數中button宣告即可

"buttons": [
{
extend: 'csv',
text: '匯出檔案',
}
]

預設就會在dataTable左上角出現"匯出檔案"的按鈕，按下去自動下載table內容的csv檔。

HTML5 export buttons

"HTML5 export buttons"

但是這個按鈕有點太陽春，我們想自訂按鈕樣式與顯示位置。

找到兩個方法：

方法一：

比較簡單，但是只能模擬單一按鈕功能，如果按鈕屬性是collection就不能用了。

// dataTable上宣告匯出csv的按鈕
buttons: [
{
extend: 'csv',
}
]

// 將自訂按鈕綁上on click事件，去觸發datatable對應按鈕.trigger();

$("#ExportReporttoExcel").on("click", function() {
table.button( '.buttons-csv' ).trigger();
});

// 最後還要隱藏原本按鈕
$(".buttons-csv").detach();

方法二：

直接修改dataTable上匯出csv的按鈕的樣式，並且將按鈕append到想要的地方 (較推薦此方法)

var dt = $('#data-table' ).DataTable();

// 宣告按鈕，在text屬性加入按鈕內的HTML，className屬性加入需要的class

// Configure Export Buttons

new $.fn.dataTable.Buttons( dt, {

    buttons: [

{

            text: '<i class="fa fa-lg fa-file-text-o"></i>',

            extend: 'csv',

            className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-csv ttip',

}

} );

// 將按鈕append到想要的地方

// Add the Export buttons to the toolbox

dt.buttons( 0, null ).container().appendTo( '#export-assets' );

參考自

dizzy03

碎碎念

dizzy03 發表在痞客邦留言(0) 人氣()

E-mail轉寄

碎碎念