只有在第一页、最后一页和最后一页才呈现带有下拉/select‘s的DataTable。有什么问题吗？

Question

我正在设置一个新的概述，并希望使用jQuery DataTables。我有正确的数据显示在第一页。但是当我按下一页时，我的选择框没有任何选项。如果我调整窗口大小或任何迫使表重新绘制的内容，则更新该表，并显示正确的数据。如果我选择显示最后一页，数据将立即正确显示，但所有页面之间仍然没有显示选项的选择框。如何在所有页面上显示选项？

我尝试过使用DataTables文档作为页面(https://datatables.net/reference/api/page%28%29)，但是这些函数没有被击中。另外，我也尝试过其他几种方法来绘制下一页，但我无法让它工作。现在我正在做桌子，然后再把它做成DataTable。

$.ajax({
    ...

    success: function (response) {
        CaseData = response;
        console.log(CaseData)
        //The following method creates the table
        buildColumnHeader();

        table = $('#case-layout-table').DataTable({
            scrollY: "600px",
            scrollX: true,
            scrollCollapse: true,
            responsive: true,
            fixedColumns: {
                leftColumns: 3
            },
            data: CaseData,
            "language": {
                "url": "http://cdn.datatables.net/plug-ins/1.10.19/i18n/Danish.json"
            },
            "columns": columns,
        });

        table = $('#case-layout-table').DataTable();
    }
});

//this is code copied from datatables docs - neither are being hit on next/previous page
var table = $('#example').DataTable();

$('#next').on( 'click', function () {
    table.page( 'next' ).draw( 'page' );
} );

$('#previous').on( 'click', function () {
    table.page( 'previous' ).draw( 'page' );
} );

function generateDropDown(data, meta, control) {
var html = "";
if ($('#select-' + (data.ID + '1' + (meta.col - 1)) + '').has('option').length <= 0) {
    html = '<select onChange="handleOnSelectChange(' + (data.ID + '1' + (meta.col - 1)) + ',' + data.ID + ')" style="width: 140px; text-align: center;" id=select-' + (data.ID + '1' + (meta.col - 1)) + '></select>';
    for (var i in control.Parameters) {
        var $option;
        if (control.Parameters[i] === data.DataList[meta.col - 1].Case) {
            $option = $('<option/>', {
                value: control.Parameters[i],
                text: control.Parameters[i],
                selected: true,
            });
        }
        else {
            $option = $('<option/>', {
                value: control.Parameters[i],
                text: control.Parameters[i],
            });
        }

        $('#select-' + (data.ID + '1' + (meta.col - 1)) + '').append($option);
    }
}
return html;
}

在buildColumnHeader()-method中，我使用以下代码，它调用buildRender

else {
    columns[i] = {
        title: group.ControlMetas[i - 1].Title,
        type: group.ControlMetas[i - 1].Type,
        orderDataType: "dom-" + group.ControlMetas[i - 1].Type,
        data: null,
        id: i,
        render:
            function (data, type, row, meta) {
                return buildRender(data, meta)
            }
}

buildRender使用以下方法，如果我的controlType是下拉的

else if (control.Type === 'Dropdown') {
  html = generateDropDown(data, meta, control)

Answer 1

我已经找到了解决这个问题的办法。在generateDropDown-method中，我改变了我做选择框的方式。因此，我现在不再使用jQuery，而是编写HTML。