How to add a DropDown list to edit a single column from a datatable?

nick666

Hopefully, I can get some help with this. I've basically got a page on my site with a table, and the table is populated from a database with one of my models. I'd like to have a dropdown list to allow the user to edit one of the columns of the table according to a fixed list of options.

Right now, I was able to edit any of the fields by double-clicking them but didn't have luck adding the dropdown list over one of the columns.

Any sort of example or guidance would be greatly appreciated

Here's what I have so far:

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>

colin

Is this using Editor? Is so, this example should help,

Colin

nick666

Hi @colin

Thank you so much for your response.
I definitely tried with that example but was not able to "connect" to my Django implementation because I don't know how to make the mapping work.

Currently, I'm using dataTables 1.10, so maybe that's the main reason because the mapping is not working. Do you know if it is possible to achieve the "dropdown" edit without installing editor?

Thanks!

colin

Without Editor, you could add a select to the table, but any changed would just be in the DOM, and wouldn't synchronise back to the server.

Colin