Populate drop down from another table.

Populate drop down from another table.

frosty8467frosty8467 Posts: 4Questions: 3Answers: 0

Hi apologies if this is a really basic question but I'm a bit new to this type of use for a data table.

I have a customer that wants to use a mvc form with a data table for input. I have standard txt fields working fine but now the requirement has changed to allow the user to user dropdowns to select data from associated tables.

I am not sure of the following things

  1. how to render a dropdown box in a data table
  2. how to populate the selection with data from another table.

Again apologies if this is a stupid question but the user has decided this and I am on a tight time frame to deliver so thought it easier to ask than spend hours trawling the net.

Thank is advance.

Frosty

Answers

  • FroopleDesignFroopleDesign Posts: 21Questions: 3Answers: 0
    edited September 2023

    I'm fairly new to data tables myself, do you wish to make the dropdowns in the editor select data from another table similar to the nested editor example here?
    https://editor.datatables.net/examples/simple/join

    or do you perhaps wish to create a custom dropdown? You can use javascript document ready functions to call an ajax request to a custom script which returns a list of data which can be used to define a variable to populate the dropdowns. Something like

    `  // Fetch the dropdown options using AJAX
        $.ajax({
            url: '/dropdownsJSON.php', // Adjust the path to dropdowns.php
            dataType: 'json',
            success: function(options) {
                // Populate platform dropdown
                var platformDropdown = $('#platformDropdown');
                options.platformOptionsSingle.forEach(function(option) {
                    platformDropdown.append($('<option>', {
                        value: option,
                        text: option
                    }));
                });`
    

    then

                        {
                            "label": "Platform:",
                            "name": "platform",
                            "type": "select",
                         "options": options.platformOptionsSingle,
                        },
    

    You can also use the render data functionality https://datatables.net/manual/data/renderers#Data-rendering

    I hope this information helps you in some way :)

    ~FroopleDesign

Sign In or Register to comment.