Я настраиваю новый обзор и хочу использовать 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 () я использую следующий код, который вызывает 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)
```