Using Datatable's server side processing with Django Templates

2.1k views Asked by At

I have been using DataTables on a Django implementation. The tables displayed on my web pages have recently gotten big enough that I need to enable server side processing to take the load off the client side. I am unable to get DataTables to work with server side processing.

urls.py:

urlpatterns = patterns('',
    url(r'^get_customers$', views.get_customers, name = "get_customers"),
)

views:py

def get_customers(request):
    json_test = json.dumps({                   
        "draw": 1,
        "recordsTotal": 1,
        "recordsFiltered": 1,
        "data": [         
                "test",
                "test",                   
                "test",                     
                "test"                           
    ]})
    return HttpResponse(
                    json_test,
                    content_type="application/json"
    )

template:

        <table id="table_id" class="table table-striped"
            data-url="{% url 'dashboard:get_customers' %}">
          <thead>
            <tr>
                {% block table_head %}
                <th>Customer</th>
                <th>Devices</th>
                <th>Score (%)</th>
                <th>Status</th>
                {% endblock table_head %}
            </tr>
          </thead>
          <tbody>
          </tbody>
      </table>

jquery.data-table-init.js:

$(document).ready( function () {
    $('#table_id').DataTable({
                          "processing": true,
                          "serverSide": true,
                          "ajax": $(this).attr('data-url'),
     });
});

I am getting this output from manage.py:

[04/Jun/2015 14:07:20] "GET /dashboard/ HTTP/1.1" 200 9328
[04/Jun/2015 14:07:20] "GET /static/dashboard/css/base.css HTTP/1.1" 304 0
[04/Jun/2015 14:07:20] "GET /static/dashboard/bootstrap-3.3.4-dist/css  /bootstrap.min.css HTTP/1.1" 304 0
[04/Jun/2015 14:07:20] "GET /static/dashboard/js/jquery-1.11.3.min.js HTTP/1.1" 304 0
[04/Jun/2015 14:07:20] "GET /static/dashboard/bootstrap-3.3.4-dist/js/bootstrap.min.js HTTP/1.1" 304 0
[04/Jun/2015 14:07:20] "GET /static/dashboard/DataTables-1.10.2/media/js/jquery.dataTables.min.js HTTP/1.1" 304 0
[04/Jun/2015 14:07:20] "GET /static/dashboard/js/jquery.data-table-init.js HTTP/1.1" 304 0
[04/Jun/2015 14:07:20] "GET /static/dashboard/js/jquery.csv-export.js HTTP/1.1" 304 0
[04/Jun/2015 14:07:20] "GET /dashboard/?draw=1&columns%5B0%5D%5Bdata%5D=0&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=1&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=2&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=3&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1433437640548 HTTP/1.1" 200 9328

In addition to that output. Mozilla Firefox's webconsole is telling me there is a TypeError: g is null and data tables is giving the following output: DataTables warning: table id=table_id - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/

I feel like I am missing a step, but between the DataTables documentation, some tutorials and other similar stack overflow questions I can't seem to figure out what it could be.

0

There are 0 answers