datatables 添加excel下載

Datatables 版本 1.10.12

和普通datatables不同的是：

引入包

<script
            src="../../vendor/datatables/js/dataTables.buttons.min.js"></script>
    <script
            src="../../vendor/datatables/js/buttons.flash.min.js"></script>
    <script
            src="../../vendor/datatables/js/jszip.min.js"></script>
    <script
            src="../../vendor/datatables/js/buttons.html5.min.js"></script>
    <script src="../../js/datatables.ext.js"></script>

datatable前增長dom

<form style="padding-bottom: 10px" name="search" class="form-inline" method="post" role="form" align="center">
        <div id="excelDiv"  align="right">
        </div>
    </form>

js中：

datatables聲明：

$("#tableName").ExtDataTable()

    $(".dt-button").remove();
    var table = $('#tablename').DataTable();

    new $.fn.dataTable.Buttons( table, {
        buttons: [
            'copy', 'csv', 'excel'
        ]
    } );
    table.buttons().container()
        .appendTo( $("#excelDiv") );

 

插入的datatables.ext.js包

/**
 * jQuery Datatables extends
 *
 * $("#table").ExtDataTable(options)
 *      options:
 *
 *     loadTable : function(option) {}
 *          @param option:
 *                      "sUrl":
 *                      "oData":
 *                      "fnSuccess" : function(json)
 *                      "fnError"   : function (xhr, error, thrown)
 *     clearTable : function()
 */
!function($) {
    "use strict";
    if (!$.fn.DataTable || !$.fn.DataTable.defaults || $.fn.DataTable.defaults.hasExtended) {
        return;
    }
    $.fn.DataTable.defaults.hasExtended = true;

    var DEFAULT_OPTIONS = {
        //"processing"      : true,
        // "serverSide"      : false,
        "searching"       : false,
        "bRetrieve": true,
        // "stateSave"       : false,
        // "lengthMenu"      : [ [10, 20, 50, 100, -1], [10, 20, 50, 100, "所有"] ],
        "lengthChange"    : false,
        "iDisplayLength": 10,
        //"pageLength"      : 10,
        //"autoWidth"       : true,
        // "scrollCollapse"  : false,
        // "paging"          : true,
        //"pagingType"      : "full_numbers",
        // "info"            : true,
        "ordering"        : true
    };

    function ExtDataTable(options) {
        var dynAjaxOptions = null;

        if (options == null) return $(this).DataTable();

        var realOption = $.extend(true, {}, DEFAULT_OPTIONS, options);


        var oDataTable = $(this).DataTable(realOption);

        return oDataTable;
    }

    $.fn.ExtDataTable = ExtDataTable;

    $.ExtDataTable = function(selector, options) {
        return $(selector).ExtDataTable(options);
    };
}(jQuery);