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

Posted 2023-05-08

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

【英文标题】：How to add dropdown in my datatable ajax serverside data in showing to table using datatable columns

【发布时间】：2021-08-02 17:15:52

【问题描述】：

我是数据表 ajax 服务器端数据获取 uisng php jquery ajax 的新手。我必须获取数据，但现在我想在某些列中添加一个下拉列表以提交特定行的数据。

在名为“QA Status”的表格列中，我想为每一行添加一个下拉列表。

并且下拉选项是 1) 待定 2) 接受 3) 拒绝

See the image

我想使用列添加使用 jquery 数据表的下拉列表

这是我在表格中显示数据的代码

"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" 
        ]

在此代码 "data": "qa_status" 中，我想显示一个下拉列表，并且我还想在每行的最后一列中添加提交按钮，以便在不重新加载页面的情况下提交所选值。

请帮帮我。

【参考方案1】：

尝试添加以下内容，看看是否有效：

将以下代码放入数据表选项中：

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>')
            );
        );
    ,

);

【讨论】：

我已经尝试过了，但它不起作用。当我在列 [] 之后的数据表中添加此代码时，但它没有显示数据

尝试在initComplete 中记录this.api().columns()，看看它记录了什么，