使用数据表导出动态表

时间:2017-11-16 16:44:23

标签: javascript jquery datatables

我试图使用数据表来导出表格。

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

<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行。

我错过了什么?

1 个答案:

答案 0 :(得分: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'
        ]
    } );