datatables 添加excel下载

时间:2023-03-09 18:01:44
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);