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