Jquery Datatables Edit Cell In Place With Drop Down Select

I have a DataTables table coming from a database. I want to have a dropdown enabled when I select rows from the dataset. The dropdown will be populated with every option from that

Solution 1:

This is going to add the ddl on your 3rd column for all the values in that column.

 initComplete: function () { // After DataTable initialized
            this.api().columns([2]).every(function () {
                /* use of [2] for third column.  Leave blank - columns() - for all.
                Multiples? Use columns[0,1]) for first and second, e.g. */
                var column = this;
                var select = $('<select><option value=""/></select>')
                    .appendTo($('.datatable .dropdown .third').empty()) /* for multiples use .appendTo( $(column.header()).empty() ) or .appendTo( $(column.footer()).empty() ) */
                    .on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                    });
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            }); // this.api function
        } //initComplete function

    });
});
$(window).resize(function () {
    $('.datatable').removeAttr('style');
});