jQuery datatables row selectpicker

Question

Вопрос в том, как создать selectpicker внутри таблицы. У меня есть rest 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">'}, 

    ]