Как добавить выпадающий список для редактирования таблицы в JS/Django-Ajax?

Надеюсь на помощь в этом вопросе. У меня на сайте есть страница с таблицей, и таблица заполняется из базы данных одной из моих моделей. Я хотел бы иметь выпадающий список, чтобы позволить пользователю редактировать один из столбцов таблицы в соответствии с фиксированным списком опций.

Сейчас я смог отредактировать любое из полей, дважды щелкнув по ним, но мне не удалось добавить выпадающий список над одним из столбцов.

Любой пример или руководство были бы очень признательны :)

Вот что у меня есть на данный момент:

JS:

$(document).ready(function() {
             
         $.ajaxSetup({
              headers: { "X-CSRFToken": getCookie("csrftoken") }
         });
      
         var table = $('#maintable').DataTable( {
            "ajax": {"type":"GET",
                     "url" :"/TableEditor/request/",
                     "data":function( d ) {
                        d.placeholder = "asdf";
                      }
            },
            "columns": [
               {
                  "className":   'show-details-control',
                  "orderable":    false,
                  "data":           null,
                  "width":          "12px",
                  "defaultContent":'<button class="btn btn-sm btn-success" type="button"><span class="glyphicon glyphicon-chevron-down"></span></button>'
               },
               {
                  "className":   'edit-control',
                  "orderable":    false,
                  "data":           null,
                  "width":          "12px",
                  "defaultContent": '<button type="button" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-edit"></span></button>'
               },
               {
                  "className":   'delete-control',
                  "orderable":    false,
                  "data":           null,
                  "width":          "12px",
                  "defaultContent": '<button type="button" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>'
               },
               { "data": "investor", "class":'investor-ed'},
               { "data": "amount", "type": "num-fmt" , "class":'amount-ed'},
               { "data": "code" , "class":'code-ed'}
            ],
            "pageLength": 15,
            "order": [[5, "desc" ]]
         } );
         
});

HTML:

<div class="panel panel-info">
          <div class="panel-heading">Table editor</div>
          <div class="panel-body">
            {% include "datatable.html" with rendertable=maintable %}
          </div>
</div>

Вернуться на верх