zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    每日一题20180325
    Linux下MySQL表名区分大小写
    CentOS删除编译安装的Python3
    HTTPS配置
    测试 js 方法运行时间(转)
    使用dbutils进行批处理
    oracle生成主键
    JDBC学习笔记(10)——调用函数&存储过程(转)
    easyui Draggable
    blob
  • 原文地址:https://www.cnblogs.com/lizhang4/p/9506309.html
Copyright © 2011-2022 走看看