Sending a variable to the DataTable and displaying it.

bobs64956

Hey,

I was wondering if it is possible for the user to select an option from a drop-down menu in which it will set the value within the datatable.

//HTML Drop-down menu in which the user will select and set the  value
                  <div class="form-group">
                        <select name="filter_gmrate" id="filter_gmrate" class="form-control" required>
                            <option value="">Select Gross Margin Rate</option>
                            @foreach($gmrrate_name as $gmrate)

                            <option value="{{ $gmrate->gmrRate }}">{{ $gmrate->gmrRate }}</option>

                            @endforeach
                        </select>
                    </div>
                    <div class="form-group" align="center">
                        <button type="button" name="gmrateset" id="gmrateset" class="btn btn-info">Set Gross Margin Rate</button>
                    </div>
                </div>

//In the Datatables column, its being displayed like this

                {
                    "data": null,
                    "render": function(data,type,row) {
                        return filter_gmrate;
                    }
                },

//When clicking on the button, it will set the value (Just unsure how to destroy and display the new data)
    $('#gmrateset').click(function(){
        var filter_gmrate = $('#filter_gmrate').val(); //sets the value of gmrate
        console.log(filter_gmrate);
        $('#jobprice_data').DataTable().destroy();
        fill_datatable();
    });

rf1234

I was wondering if it is possible for the user to select an option from a drop-down menu in which it will set the value within the datatable.

Yes, by using Editor with inline editing.

Here is an example from my own coding:

var filtrEditor = new $.fn.dataTable.Editor({
    ajax: {
        url: 'actions.php?action=tblFiltr'
    },
    table: "#tblFiltr",
    formOptions: {
        inline: {
            submit: 'allIfChanged',
            onBlur: 'submit'
        },
        main: {
            focus: null
        }
    },
    fields: [
             {
            label: lang === 'de' ? 'Abteilungsauswahl:' : 'Department selection:',
            name: "govdept[].id", //render gov_name, govdept_name, (regional_12)
            type: "selectize",
            opts: {
                create: false,
                maxItems: null,
                openOnFocus: true,
                allowEmptyOption: true,
                placeholder: lang === 'de' ? 'Bitte wählen Sie eine oder mehrere Abteilung(en)' : 'Please select one or more Department(s)',
            }
        },  {
            label: lang === 'de' ? 'Eigene Bezeichnung des Filters:' : 'Filter Label:',
            name:  "filtr.label",
            attr: {
                placeholder: lang === 'de' ? 
                    "Bitte frei wählbaren Text eingeben" :
                    "Please enter text of your choice"
                }        
        }, {
            label: lang === 'de' ? 'Feld Typ:' : 'Field Type:',
            name: "filtr.field_type",
            type: "select",
            options: fieldTypeOptions
        }
    ]
});

$('#tblFiltr').on( 'click', 'tbody td.filtrsInline', function (e) {
    filtrEditor.inline( this, {
        onBlur: 'submit'
    } )
} )