Question

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

我尝试将DataTables文档用于页面（https://datatables.net/reference/api/page%28%29），但是未击中功能。另外，我尝试了其他几种方式绘制下一页，但无法正常工作。目前，我先创建表，再创建数据表。

$.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（）方法中，我正在使用以下代码，该代码调用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)
            }
}

如果我的controlType为下拉菜单，则buildRender使用以下内容

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

Answer 1

我找到了解决问题的方法。在generateDropDown方法中，我更改了制作选择框的方式。因此，我现在不使用jQuery，而是编写HTML。

具有下拉菜单/选择列表的DataTable仅在第一，最后和最后1页上呈现。可能是什么问题？

1 个答案: