Question

为了将表格数据导出到excel文件中，我在下面的代码中编写了

。

"buttons": [
        {
            extend: 'excelHtml5',
            text: 'Excel Export',
            filename: function () { return 'AllLists_' + time; },
            exportOptions: {
                columns: [0, 1, 2, 3, 4, 5, 6, 7],
                modifier: {
                    page: 'all',                        
                }
            },
        }
    ],

要在page: 'all/current'行进行动态选择，因此我在下面编写了代码。

<select class="form-control" id="selectDataOption">
     <option value="current">Current page</option>
     <option value="all">Entire table</option>
</select>

我已使用以下代码选择下拉列表

$("#exportExcelbtn").on("click", function () {
  dt_tblOutForApproval.buttons.exportData({
    modifier: {
        page: function () {
            return ($("#selectDataOption").children("option").filter(":selected").val());
        }
     }
   });
});

但这没有帮助。谁能帮助我提供更好的解决方案，或者我在解决方案中缺少什么？

Answer 1

dt_tblOutForApproval.buttons.exportData()不是将数据导出到文件的函数，而是返回数据的函数。

对于您的问题，有两种可能的解决方法：

由于数据表不允许我们再次初始化选项，因此我们可以删除原始表并创建一个新表。但这不是一种有效的方法。

第二种方法是删除旧的“ Excel Export”按钮并根据当前模式动态创建一个新按钮。由于将存在两种模式（当前和全部）的状态，因此我创建一个ExcelExportManager()来管理当前模式（状态）：

// dt is an object created by `$('#example').DataTable({})`
function ExcelExportManager(dt){ 
    function _createExportButtonOpt(pageOpt="current"){
        return {
            extend: 'excelHtml5',
            text: 'export ' + pageOpt,
            name : pageOpt,        // button name
            filename: function () { return 'AllLists_' + time; },
            exportOptions: {
                //columns: [0, 1, 2, 3, 4, 5, 6, 7],
                modifier:{ page: pageOpt }, 
            },
        };
    };

    function _setModeAsCurrent(){
        var current= dt.button().remove(0, "current:name");
        var current= dt.button().remove(0, "all:name");
        var current= dt.button().add(0, _createExportButtonOpt("current"));
    }

    function _setModeAsAll(){
        var current= dt.button().remove(0, "current:name"); 
        var current= dt.button().remove(0, "all:name");
        var current= dt.button().add(0, _createExportButtonOpt("all"));
    }

    var mode = "current";  // initial value
    Object.defineProperty(this,"exportMode",{
        get:function(){ return pageMode; },
        set:function(value){
            switch(value.toLowerCase()){
                case "current":
                    _setModeAsCurrent();
                    break;
                case "all":
                    _setModeAsAll();
                    break;
                default:
                    throw new Error("unsupported export mode");
            }
            mode = value;
        },
    });
};

// create an instance
var excelManager = new ExcelExportManager(dt_tblOutForApproval);

这样，当我们想要更改模式时，我们可以设置excelManager.exportMode属性：

// a function that get current option selected by user
function getExportMode(){
    return exportOption=$("#selectDataOption").children("option")
        .filter(":selected")
        .val();
}
 // initialize 
excelManager.exportMode = getExportMode();
// on change
$("#selectDataOption").change(function() { excelManager.exportMode = getExportMode(); });

演示：

要在线播放，请点击运行代码段

<!DOCTYPE html>
<html>

<head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-html5-1.5.6/datatables.min.css" />

    <script type="text/javascript"
        src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-html5-1.5.6/datatables.min.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
</head>

<body>
    <div class="container">
        <table id="example" class="display nowrap" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>

            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>

            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$3,120</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Director</td>
                    <td>Edinburgh</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$5,300</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <123414124124.null@domain.com>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <123414124124.null@domain.com>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <123414124124.null@domain.com>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <123414124124.null@domain.com>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <123414124124.null@domain.com>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <123414124124.null@domain.com>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
            </tbody>
        </table>
    </div>
    <select class="form-control" id="selectDataOption">
        <option value="current">Current page</option>
        <option value="all">Entire table</option>
    </select>
</body>

<script>
    $(document).ready(function () {

        var time = new Date();
        var dt_tblOutForApproval = $('#example').DataTable({
            dom: 'Bftrip',
            paging: true,
            pageLength: 5,
            buttons: [ ]
        });

        // dt is an object created by `$('#example').DataTable({})`
        function ExcelExportManager(dt){ 
            function _createExportButtonOpt(pageOpt="current"){
                return {
                    extend: 'excelHtml5',
                    text: 'export ' + pageOpt,
                    name : pageOpt,        // button name
                    filename: function () { return 'AllLists_' + time; },
                    exportOptions: {
                        //columns: [0, 1, 2, 3, 4, 5, 6, 7],
                        modifier:{ page: pageOpt }, 
                    },
                };
            };

            function _setModeAsCurrent(){
                var current= dt.button().remove(0, "current:name");
                var current= dt.button().remove(0, "all:name");
                var current= dt.button().add(0, _createExportButtonOpt("current"));
            }

            function _setModeAsAll(){
                var current= dt.button().remove(0, "current:name"); 
                var current= dt.button().remove(0, "all:name");
                var current= dt.button().add(0, _createExportButtonOpt("all"));
            }

            var mode = "current";  // initial value
            Object.defineProperty(this,"exportMode",{
                get:function(){ return pageMode; },
                set:function(value){
                    switch(value.toLowerCase()){
                        case "current":
                            _setModeAsCurrent();
                            break;
                        case "all":
                            _setModeAsAll();
                            break;
                        default:
                            throw new Error("unsupported export mode");
                    }
                    mode = value;
                },
            });
        };

        function getExportMode(){
            return exportOption=$("#selectDataOption").children("option")
                .filter(":selected")
                .val();
        }
        var excelManager = new ExcelExportManager(dt_tblOutForApproval);
        // initialize 
        excelManager.exportMode = getExportMode();
        // on change
        $("#selectDataOption").change(function() { excelManager.exportMode = getExportMode(); });
    });
</script>

</html>

如何在数据表中动态地将“页面”传递给exportOptions> modifier

1 个答案: