jQuery datatables row selectpicker

Question

問題是如何在表內創建selectpicker。我有休息API，我的價值觀到我的桌子。但我的桌子必須有selectpicker加入。我不知道如何管理這個。 selectpicker包含來自rest api的值。 這就是我想要把selecpicker：

1. { "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">'}, 

     ] 

    }); 
} 

如果你culd給我一些這方面的建議。

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">'}, 

    ]