如何在我的数据表 ajax 服务器端数据中添加下拉列表，以使用数据表列显示到表中

Question

I'm new to datatable ajax serverside data fething uisng php jquery ajax. I have to fetch data but now I want to add a dropdown in some columns to submit the data for a particular row.

In my table column with the name of "QA Status", I want to add a dropdown to every row.

and the dropdown option is 1) Pending 2) Accepted 3) Rejected

See the image

I want to add dropdown using jquery datatable using columns

This is my code for showing the data in the table

"columns": [
            {
              "render": function(data, type, full, meta) {
                return "";
              }
            },
            { "data": "created_at" },
            { "data": "campaign" },
            { data: null, render: function ( data, type, row ) {
                    return data.fname+' '+data.lname;
                } 
            },
            { "data": "c_name" },
            { "data": "qa_status" },
            { "data": "qa_resone" },
            { "data": "client_status" },
            { "data": "client_resone" },
            { "data": "score" }
        ]

In this code { "data": "qa_status" } I want to show a dropdown and I want also to add submit button in the last column of every row for selected value submitted without page reloading.

please help me.

Answer 1

try adding following and see if that works:

put following code inside datatable option:

let data_table = $(".table_class").DataTables({

    columns: [
        ...
    ],

    initComplete: function() {
        this.api().columns().every(function() {
            var column = this;
            var select = $('<select style="width:100%;"><option value="">Select</option></select>')
                .appendTo($(column.footer()).empty())
                .on('change', function() {
                    var val = $.fn.dataTable.util.escapeRegex($(this).val());
                    column.search(val ? '^' + val + '$' : '', true, false).draw();
                });
            column.draw(false).data().unique().each(function(d, j) {
                select.append('<option value="' + d + '">' + d + '</option>')
            });
        });
    },

});