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

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

nick666nick666 Posts: 2Questions: 1Answers: 0

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>

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • nick666nick666 Posts: 2Questions: 1Answers: 0

    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!

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

Sign In or Register to comment.