JQuery's DataTables Editor plugin and Django
<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>