jQuery 数据表行选择器

Question

问题是如何在 table 中创建选择器。我有休息 api，我在 table 中获取值。但是我的table肯定有selectpicker插入了。我不知道如何管理这个。选择器包含来自剩余 api 的值。这是我想放置选择器的地方：

{ "sCellType": "select", "sClass": "selectpicker","data":'<option>'+"status"+'</option>'}

我的 jQuery 代码如下：

function get_all(){
    $('#data_table_out_mix').dataTable( {
        "dom": '<"top"fi>rt<"bottom"lp><"clear">',
        "iDisplayLength": 5,
        "processing": true,
        "serverSide": true,

         "ajax":{
             url:'/out_invo_all/'
         },

         "columns": [

             { "data": "invoice_number" },
             { "data": "customer" },
             { "data": "date" },
             { "data": "due_date" },
             { "data": "total_invoice_amount" },
             { "sCellType": "select", "sClass": "selectpicker","data":'<option>'+"status"+'</option>'},
             {"defaultContent": '<img style="cursor:pointer" class="img-responsive CloneRow" src="../static/izibizi/images/forms/icon_duplicate.png">'},
             {"defaultContent": '<img id = "obrisi" data-toggle="modal" data-target="#OutgoingInvo" style="cursor:pointer" class="img-responsive OutgoingInvo" src="../images/forms/icon_delete.png">'},

         ]

    });
}

如果你能给我一些建议。

Answer 1

您可以使用 dataTables columns.render 函数创建动态元素。

"columns": [

         { "data": "invoice_number" },
         { "data": "customer" },
         { "data": "date" },
         { "data": "due_date" },
         { "data": "total_invoice_amount" },
         { "data": "arraySelect", render: function(val) {
             var options = '';
             for(var i=0; i<val.length; i++)
                 options += '<option>'+val[i]+'</option>';
             return '<select>'+options+'</select>';
         }},
         {"defaultContent": '<img style="cursor:pointer" class="img-responsive CloneRow" src="../static/izibizi/images/forms/icon_duplicate.png">'},
         {"defaultContent": '<img id = "obrisi" data-toggle="modal" data-target="#OutgoingInvo" style="cursor:pointer" class="img-responsive OutgoingInvo" src="../images/forms/icon_delete.png">'},

     ]

jQuery 数据表行选择器

jQuery datatables row selectpicker

jquery

datatables

jquery-datatables