• 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);
  • 相关阅读:
    DEM、DSM、DOM 名词解释
    html checkbox样式美化
    通过Ajax方式上传文件(input file),使用FormData进行Ajax请求
    C# 读取指定文件夹下所有文件
    ASP.NET 实现Base64文件流下载PDF
    Asp.Net使用百度编辑器(ueditor)
    asp.net 伪静态实现(UrlRewritingNet)
    C# 各种类型的转换
    asp.net操作word 配置在IIS上出现的问题
    plupload 上传组件的使用
  • 原文地址:https://www.cnblogs.com/lizhang4/p/9506309.html
Copyright © 2020-2023  润新知