Мне нужно заполнить раскрывающийся список значениями, которые хранятся в моем DataTable.
Мой DataTable загружается нажатием кнопки, после чего DataTable пользователь может обновитьзаписей.В этих данных есть «Номер заказа».Мне нужны все существующие номера заказов, чтобы заполнить раскрывающийся список, который отображается, когда пользователь нажимает кнопку «Редактировать», но я не уверен, как и где разместить код.
jQuery для получения и заполнения таблицы
// JSON GET to populate 'Existing Rules' section
var addModifyDeleteButtonClick = function () {
$('#toDrForm').trigger('reset');
$('#todrexitingrules').show();
$('#dialPlanTelNo').html(telNumberSelected);
if (buttonclicked == 'Modify' || buttonclicked == 'Add') {
$("#existingRuleSectionHeader").html('Existing dial plan rules');
} else {
$("#existingRuleSectionHeader").html('Delete an existing dial plan rule');
}
// Existing rule datatable creator
var existingRuleTable = $('#existingRulesDataTable')
.on('error.dt', function () {
$('#todrexitingrules').hide();
$('#errorModal').modal('show');
$('#errorModal').on('shown.bs.modal', function () {
$('#errorModalCloseButton').focus();
})
$('#existingRuleError').html(
'<p>There was an issue retrieving the data. Please try again.</p>'
+ '<p>If the error keeps occurring, please get in touch.</p>');
})
.DataTable({
"ordering": false, // Allows ordering
"searching": false, // Searchbox
"paging": true, // Pagination
"info": false, // Shows 'Showing X of X' information
"pagingType": 'simple_numbers', // Shows Previous, page numbers & next buttons only
"pageLength": 10, // Defaults number of rows to display in table. If changing this value change the show/hide below
"dom": '<"top"f>rt<"bottom"lp><"clear">', // Positions table elements
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], // Sets up the amount of records to display
"fnDrawCallback": function () {
if ($('#existingRulesDataTable').DataTable().rows().count() < 11) {
$("div[class='bottom']").hide(); // Hides paginator & dropdown if less than 11 records returned
} else {
$("div[class='bottom']").show(); // Shows paginator & dropdown if 11 or more records are returned
}
},
'ajax': {
"type": 'GET',
"url": "js/dataTable.json", // TODO > Needs to be changed when actual file resolved
"data": function (data) {
return data;
},
"dataSrc": function (res) {
existingRuleTableCount = res.data.length;
return res.data;
},
"dataType": 'json',
},
"columns": [ // Display JSON data in table
{ "data": "position" },
{ "data": "startTime" },
{ "data": "endTime" },
{ "data": "selectedDays" },
{ "data": "selectedDates" },
{ "data": "selectedMonths" },
{ "data": "timeRange" },
{
"data": null,
"render": function (data) {
if (buttonclicked == 'Modify') { // Displays the radio button when 'Mod' clicked
return '<label class="c-radio" style="margin-bottom: 0px">'
+ '<input type="radio" name="existingRuleActionRadioButton" value="option1">'
+ '<span class="fa fa-check"></span>'
+ '</label>';
} else if (buttonclicked == 'Delete') { // Displays the delete button when 'Del' clicked
return '<button name="deleteRuleButton" class="btn btn-danger">'
+ '<i class="fa fa-trash-o" style="font-size: large"></i>'
+ '</button>';
} else {
return ''; // Needed for the 'Add' button click
}
}
},
],
"createdRow": function (row, data, dataIndex) {
if (data.startTime == 'Anytime') {
$('td:eq(1)', row).attr('colspan', 2).css('text-align', 'center').html('All day'); // Adds COLSPAN attribute, centers the wording and changes it from 'Anytime'
$('td:eq(2)', row).css('display', 'none'); // Hides cell next to the cell with COLSPAN attribute
}
if (data.timeRange == '-w') {
$('td:eq(6)', row).html('Working hours'); // Changes text returned by JSON if '-w'
} else if (data.timeRange == '-oo') {
$('td:eq(6)', row).html('Out of office hours'); // Changes text returned by JSON if '-oo'
}
},
"initComplete": function () {
if (buttonclicked == 'Delete') {
$('button[name=deleteRuleButton').focus();
} else if (buttonclicked == 'Modify') {
$('input[name=existingRuleActionRadioButton').focus();
}
$(this.api().cell(':last', 7, { order: 'original' }).node()).css('display', 'none');
},
"destroy": true
});
// Function call when a radio button is selected from existing rule table
$('#existingRulesDataTable').on('click', 'input[type="radio"]', function (event) {
event.stopImmediatePropagation();
var modifyRecordData = existingRuleTable.row($(this).closest('tr')).data();
modifyRadioButtonSelection(modifyRecordData);
});
}
Вызов функции, вызывается при выборе радиокнопки, форма редактирования которой предварительно всплывает
// Disables other radio buttons when one selected for 'Modify'
var modifyRadioButtonSelection = function (modifyRecordData) {
$('select[name=existingRulesDataTable_length').attr('disabled', true);
$('input:radio[name="existingRuleActionRadioButton"]').attr('disabled', true);
$("#ruleBuilder").show();
removeValidation();
$("#ruleBuilderHeader").html('Modify an existing dial plan rule');
$('#startTimeHr').focus();
$("#resetButton").css("display", "inline");
$('button[name=weekdaysbutton').removeClass('btn-primary').addClass('btn-default');
$('button[name=weekenddaysbutton').removeClass('btn-primary').addClass('btn-default');
$('button[name=monthday').removeClass('btn-primary').addClass('btn-default');
$('button[name=month').removeClass('btn-primary').addClass('btn-default');
addDisable();
// Populates fields with data passed
if (modifyRecordData.startTime == 'Anytime') {
$('#anyTimeRadioButton').prop('checked', true);
$('#specificTimeRadioButton').removeAttr('checked');
$('#startEndTimeFields').hide();
} else {
$('#anyTimeRadioButton').removeAttr('checked');
$('#specificTimeRadioButton').prop('checked', true);
$('#startEndTimeFields').show();
$('#startTimeHr').val(modifyRecordData.startTimeHr);
$('#startTimeMin').val(modifyRecordData.startTimeMin);
$('#endTimeHr').val(modifyRecordData.endTimeHr);
$('#endTimeMin').val(modifyRecordData.endTimeMin);
}
$('#orderPosition').val(modifyRecordData.position);
$('#timeRange').val(modifyRecordData.timeRange);
var selectedDays = modifyRecordData.selectedDays;
var splitSelectedDays = selectedDays.split(',');
var selectedDates = modifyRecordData.selectedDates;
var splitSelectedMonthDates = selectedDates.split(',');
var selectedMonths = modifyRecordData.selectedMonths;
var splitSelectedMonths = selectedMonths.split(',');
// Loops though and pre-selects current days passed in
splitSelectedDays.forEach(day => {
let dayName = day.trim().toLowerCase();
$('#' + dayName).toggleClass('btn-default btn-primary');
if (dayName == 'all days') {
$('button[name=weekdaysbutton]').toggleClass('btn-default btn-primary');
$('button[name=weekenddaysbutton]').toggleClass('btn-default btn-primary');
}
})
// Loops though and pre-selects current month dates passed in
splitSelectedMonthDates.forEach(monthDate => {
let monthDateValue = monthDate.trim();
let padZeroMonthDateValue = (monthDateValue < 10 ? "0" : "") + (monthDateValue);
$('#' + padZeroMonthDateValue).toggleClass('btn-default btn-primary');
if (padZeroMonthDateValue == 'All days of the month') {
$('button[name=monthday').toggleClass('btn-default btn-primary');
}
})
// Loops though and pre-selects current months passed in
splitSelectedMonths.forEach(month => {
let monthName = month.trim().toLowerCase();
$('#' + monthName).toggleClass('btn-default btn-primary');
if (monthName == 'all months') {
$('button[name=month]').toggleClass('btn-default btn-primary');
}
})
$('#resetButton').mousedown(function (event) {
buttonclicked = "Reset";
event.stopImmediatePropagation();
modifyRadioButtonSelection(modifyRecordData);
})
};
Это мой HTML
<select id="orderPosition" name="orderPosition"
class="form-control">
<option value="orderPositionDefault">
Please select a position
</option>
</select>
Мне нужен раскрывающийся списокчтобы получить все возвращенные номера позиций, как показано ниже 