title: JQuery's DataTables Editor plugin and Django
body: <p>Integrating the DataTables plugin was straightforward and getting the Editor add-on integrated was also pretty painless - up to a point. However, the client/server side has been a bear for me. </p>
  
  <p>The following is the JavaScript for DataTables and Editor. The part I cannot resolve is this snippet from the code that follows</p>
  
  <pre><code>var table = $('#theader').DataTable( {
      **bProcessing: true,
      bServerSide: true,
      start: 1,
      dataSrc: "id",
      sAjaxSource: 'load_user_json',**
  }
  </code></pre>
  
  <p>After the JavaScript is the html code relevant to the JavaScript.</p>
  
  <p>The examples given, on the DataTables/Editor site, use PHP on the server side. I know zero about PHP and I cannot figure out how to replace it with Python to pass back JSON (via the code snippet above) to the Javascript that follows using Ajax which is a current requirement of the DataTables plugin.</p>
  
  <p>Everything looks great. Everything work except getting the new/edit/delete action to work. I started with the following example on the DataTables/Editor site.</p>
  
  <p><a href="https://editor.datatables.net/examples/styling/bootstrap.html" rel="nofollow">https://editor.datatables.net/examples/styling/bootstrap.html</a></p>
  
  <hr>
  
  <h2>JAVASCRIPT (DataTables / Editor)</h2>
  
  <pre><code>    $(document).ready(function() {
          $(".dropdown-toggle").dropdown();
      });
  
  
      $(document).ready(function() {
          $(".dropdown-toggle").dropdown();
      });
  
  
              $(document).ready(function edit_users() {
  
                   var csrftoken = getCookie('csrftoken');
  
                   var editorUser = new $.fn.dataTable.Editor( {
  
                      ajax: '',  
                      table: "#theader",
                      fields: [ {
                              label: "ID:",
                              name: "ID"
                       }, {
                              label: "Name:",
                              name: "NAME"
                       }, {
                              label: "CM:",
                              name: "CM"
                       }, {
                              label: "Email:",
                              name: "EMAIL"
                       } ]
                     } );
  
  
            if ( !$.fn.dataTable.isDataTable( '#theader' ) ) {
  
              $.ajaxSetup({
                 beforeSend: function(xhr, settings) {
                 if (!csrfSafeMethod(settings.type) &amp;&amp; !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                 }
               }
              });
  
              var table = $('#theader').DataTable( {
                  bProcessing: true,
                  bServerSide: true,
                  start: 1,
                  dataSrc: "id",
                  sAjaxSource: 'load_user_json',  
                  columns: [
                          { data: "ID" },
                          { data: "NAME" },
                          { data: "CM" },
                          { data: "EMAIL" }                  
                   ],
                   select: true
               } );  
            }
  
          new $.fn.dataTable.Buttons( table, [
              { extend: "create", editor: editorUser },
              { extend: "edit",   editor: editorUser },
              { extend: "remove", editor: editorUser }
          ] );
  
          table.buttons().container()
              .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
  
         $('#theader tfoot th').each( function () {
             var title = $(this).text();
             $(this).html( '&lt;input type="text" placeholder="Search '+title+'" /&gt;' );
         } );
  
         table.columns().every( function () {
             var that = this;
  
             $('input', this.footer() ).on( 'keyup change', function () {
                 if ( that.search() !== this.value ) {
                     that
                         .search( this.value )
                         .draw();
                 }
             } );
         } );
  
      } );
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>    {% extends "base.html" %}
      {% load crispy_forms_tags %}
      {% load staticfiles %}
  
      {% block content %}
  
      {% if queryset %}
  
      &lt;h2&gt;Current Users&lt;/h2&gt;
  
      &lt;table id="theader" class="table table-bordered table-hover small order-column"&gt;
  
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;NAME&lt;/th&gt;
                  &lt;th&gt;CM&lt;/th&gt;
                  &lt;th&gt;EMAIL&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tfoot&gt;
              &lt;tr&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;NAME&lt;/th&gt;
                  &lt;th&gt;CM&lt;/th&gt;
                  &lt;th&gt;EMAIL&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
  
          &lt;tbody&gt;
                  {% for row in queryset %}
                  &lt;tr id=forloop.counter&gt;         &lt;!-- Needed for DataTables row identification --&gt;
                      &lt;td&gt;{{ row.operator_id }}&lt;/td&gt;
                      &lt;td&gt;{{ row.fullname }}&lt;/td&gt;
                      &lt;td&gt;{{ row.cm }}&lt;/td&gt;
                      &lt;td&gt;{{ row.email }}&lt;/td&gt;
                  &lt;/tr&gt;
                  {% endfor %}
          &lt;/tbody&gt;
      &lt;/table&gt;
  
      {% else %}
      &lt;h4&gt;No SKUs have been defined&lt;/h4&gt;
      {% endif %}
  
      &lt;script src="{% static 'js/searchable-users-table.js' %}"&gt;&lt;/script&gt;
  
      {% endblock %}
  </code></pre>