javascript - datatable scrollX 在动态列中无法正常工作

Question

我正在尝试从geojson feature.properties模态中动态显示很多列。我已成功显示它，但问题是当我单击下一页时，scrollX 没有按预期工作。

这是我的代码：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document" style="margin:auto !important;max-width:1080px !important;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Map Attributes</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modalbody_1">
                <div class="">
                    <table id="mapattr" class="display nowrap" style="width:100%" cellspacing="0">
                        <thead></thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
var dataGSet = [];
var dataGArray;
var columnRef = [];

$.get(url, function(data) {
columnRef = [];
$("#mapattr > thead").append("<tr></tr>");
$.each(data.features, function(a, b) {
    var cRow = [];
    $.each(b.properties, function(key, value) {
        if (a == 0) {
            $("#mapattr > thead > tr").append("<td>" + key + "</td>");
            columnRef.push({
                title: key
            })
        }
        cRow.push(value);
    });
    dataGSet.push(cRow);
});
}).done(function() {
dataGArray = JSON.parse(JSON.stringify(dataGSet));
if (!$.fn.DataTable.isDataTable('#mapattr')) {
    $("#mapattr").DataTable({
        dom: 'Bfrtip',
        data: dataGArray,
        scrollX: true,
        buttons: [
            'copy', 'csv', 'excel', 'pdf'
        ]
    });
} else {
    $('#mapattr').DataTable().destroy();
    $('#mapattr').empty();
    $("#mapattr").DataTable({
        dom: 'Bfrtip',
        data: dataGArray,
        scrollX: true,
        buttons: [
            'copy', 'csv', 'excel', 'pdf'
        ]
    });
}
});
</script>

第一次加载：

当我单击第 2 页时：

我已经尝试了这篇文章table-responsive的建议，但是用户滚动它的问题，按钮、页面和搜索框也会滚动，所以当客户想要在另一个页面中导航时，这对客户来说有点麻烦。

标签： javascriptdatatables