javascript - 使用Datatables导出动态表

Question

我正在尝试使用数据表导出表。

我遇到的问题是我有下表:

<table id="tbl" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th data-field="ID">ID</th>
<th data-field="Name">Name</th>
<th data-formatter="operateFormatter" data-events="operateEvents"></th>
</tr>           
</thead>

<tr data-index="0"><td class="sorting_asc" style="">1</td><td class="sorting" style="">asadasd</td><td class="sorting" style="">-</td></tr>
<tr data-index="1"><td class="sorting_asc" style="">2</td><td class="sorting" style="">qwqweqwe</td><td class="sorting" style="">-</td></tr>
</table>

我用它来添加要导出的按钮:

$('#tbl').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
    ]
} );

这将始终仅导出 2 行。无论我用 javascript 添加多少个到表中。

删除了克隆的事情，因为这不是我实际上在做的事情。

我用ajax填充表格:

function Load_ObjectList() {
    var url = urlService + "/TESTLoadAgencies/0";
    var EmpCode = sessionStorage['EmpCode']
    $.ajax({
        type: 'GET',
        contentType: "application/json; charset=utf-8",
        url: url,
        dataType: "json",
        async: true,
        crossDomain: true,
        cache: false,
        data: "{\"Empcode\":\"" + EmpCode + "\"}",
        success: function (response) {
            if (response.Status == "0") {

                if (response.list != null) {
                    objDataAll = response.list;
                    $('#tbl').bootstrapTable('destroy');
                    $('#tbl').bootstrapTable({

                        data: objDataAll,
                        escape: 'false'
                    });
                }

            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR);
        }
    });
}

调用此函数后，我添加按钮。当我按下按钮时，0 行被复制。

我错过了什么？

Answer 1

它仅导出您在表中手动添加的两行，因为您在初始化数据表后克隆了最后一行。你应该先这样做。

如果您希望最后一行位于导出的文件中，请首先克隆该行，然后像这样初始化数据表:

    var $tableBody = $('#tbl').find("tbody"),
        $trLast = $tableBody.find("tr:last"),
        $trNew = $trLast.clone();
    $trLast.after($trNew);

    $('#tbl').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );