Are there any examples of using datatables editor with django application?

Are there any examples of using datatables editor with django application?

mgpearce48mgpearce48 Posts: 23Questions: 6Answers: 0

In particular, Django REST framework. I have not problem getting data into the datatable however cannot get the editor buttons to work ("create", "edit", "delete"). At this stage I'm only using the trial editor package to see if suitable, does this have restrictions that prevent these functions?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    The Editor Trial is full working version. Here is an example using Editor with REST:
    https://editor.datatables.net/examples/advanced/REST.html

    cannot get the editor buttons to work

    What exactly happens? Are you getting errors in your browser's log? Is the Editor sending the Edited data to the server?

    Please start by posting your JS code for Editor and Datatables. Maybe something obvious will appear.

    Kevin

  • mgpearce48mgpearce48 Posts: 23Questions: 6Answers: 0

    Thank you for responding Kevin. My javascript is below.

    Also, I'm using the "django-rest-framework-datatables-editor" package which is supposed to be a simple seamless interface between datatables and Django REST framework. When I try to create a record with the Editor "New" button, the dialog form is displayed however nothing happens when I submit the form. I have noticed however that the server debug log has "WARNING django.request Bad Request: /api/facility/editor/", so I'm guessing there may be a problem with the ajax url.

    <script type="text/javascript">
    
        var editor;
        $(document).ready(function() {
    
            editor = new $.fn.dataTable.Editor( {
                ajax: "/api/facility/editor/?format=datatables",
                table: "#object-table",
                fields: [
                    { label: "Code:", name: "bldgcode" },
                    { label: "Name:", name: "name" },
                    { label: "Category:", name: "category" },
                    { label: "Location:", name: "location" }
                ]
            } );
    
          $.fn.dataTable.Buttons.defaults.dom.button.className = 'btn btn-sm btn-primary';
          var table = $('#object-table').DataTable( {
    
            pageLength: 10,
            order: [[ 0, 'asc' ]],
            processing: true,
            serverSide: true,
            dom: "lBfrtip",
            ajax: "/api/facility/?format=datatables",
            select: true,
    
            columns: [
                { data: "bldgcode" },
                { data: "name" },
                { data: "category" },
                { data: "location" }
            ],
    
            buttons: [
                { extend: "create", editor: editor},
                { extend: "edit",   editor: editor},
                { extend: "remove", editor: editor}
            ]
    
          } );
    
          table.buttons().container()
              .appendTo($('.col-md-6:eq(0)', table.table().container()));
    
        } );
    
      </script>
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    django-rest-framework-datatables-editor is not supplied by Datatables. Sounds like it is provided to support the Datatables server side protocol. However I don't see mention of Editor support which has a different protocol discussed here.

    I suspect you will need to find or write your own API's to support the Editor. You will need something that will update your Database for edit, create and delete. Maybe even some validation code, like duplicate names, etc, to report errors back to the client.

    Kevin

  • mgpearce48mgpearce48 Posts: 23Questions: 6Answers: 0

    Ok, understood thanks Kevin. I think I will delete that package and work on another strategy for the API's.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    I think I looked at the wrong library initially. I think this is what you are using:
    https://pypi.org/project/djangorestframework-datatables-editor/

    Looking at the docs for setting up the editor you need to change you URL by removing the parameter ?format=datatables resulting in this:

            editor = new $.fn.dataTable.Editor( {
                ajax: "/api/facility/editor/",
    

    Give that a try before removing the library.

    Kevin

  • mgpearce48mgpearce48 Posts: 23Questions: 6Answers: 0

    Kevin, I have tried your suggestion however still no joy. No matter, from your earlier response I have reviewed the example of Editor with REST and I'm confident that I can create my own API's to resolve. I have already spent too much time on the library. Many thanks.

This discussion has been closed.