Question

I need to populate a dropdown with the values that are held in my DataTable.

My DataTable is loaded by a button click then in that DataTable the user is able to update the records. In this data is an 'Order Number'. I need all existing order numbers to populate the dropdown list which is displayed when the user clicks the 'Edit' button but I'm unsure on how and where to put the code.

jQuery to get and populate table

// 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);
    });
}

Function call, called when a radio button is selected which pre-pop's editing form

// 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);
    })
};

This is my HTML

<select id="orderPosition" name="orderPosition"
    class="form-control">
    <option value="orderPositionDefault">
        Please select a position
    </option>
</select>

I need the dropdown to get populated with all the 'position' numbers returned as shown below

Answer 1

方法column().data()与.unique()和.sort()一起将在必填列中为您返回一组唯一记录，您可以使用它们来填充下拉列表的<option>值，下来。

Populate Drop Down With DataTable JSON

1 个答案: