Django Datatables Views doesn't display datatables, only json

Question

I'm pretty new to python, django and javascript. It was a breakthrough to get anything at all to display on my localhost site, but now I'm trying to get it to display as a datatable and it is only populating as raw json data I think. I'm guessing it is probably something in the template that is causing this, but I'm pretty novice so would appreciate any help.

Models.py

from django.db import models

class pitcher(models.Model):

id = models.IntegerField(primary_key=True)
player_name = models.CharField('pitcher name', max_length=255, default='null')
pitch_type = models.CharField(max_length=255, default='null')
game_date = models.DateField(null=True, blank=True)
release_speed = models.FloatField()
pfx_x = models.FloatField()
pfx_z = models.FloatField()
spin_rate = models.FloatField()
estimated_ba_using_speedangle = models.FloatField()
estimated_woba_using_speedangle = models.FloatField()
babip_value = models.FloatField()
Usage = models.FloatField()

urls.py

from django.conf.urls import url
from analyzer import views
from analyzer.views import pitcherlist
import json

urlpatterns = [
    url(r'^$', pitcherlist.as_view(), name='pitcherlist_json'),
]

views.py

from django.shortcuts import render
from .models import pitcher
from django_datatables_view.base_datatable_view import BaseDatatableView
import json
from django.http.response import HttpResponse

class pitcherlist(BaseDatatableView):
    model = pitcher
    columns = ['player_name', 'game_date','pitch_type', 'pfx_x']
    max_display_length = 500

template

<!DOCTYPE html>

<html>

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

<head>

</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <div class="well">
                <table id="pitcherlist" class="display responsive" width="100%">
                    <thead>
                        <tr>
                            <th width="5%">player_name</th>
                            <th width="5%">game_date</th>
                            <th width="5%">pitch_type</th>
                            <th width="5%">pfx_x</th>
                            <th width="5%"></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {
    var oTable: $('#pitcherlist').dataTable({
        "processing": true,
        "serverSide": true,
        "ajaxSource": {% url 'pitcherlist_json' %}
    });




</script>
</body>
</html>

This is the output:

{"draw": 0, "recordsTotal": 171, "recordsFiltered": 171, "data": [["Hector Neris", "2017-07-31", "FF", -0.6053], ["Hector Neris", "2017-07-31", "FS", -1.1989], ["Hector Neris", "2017-07-31", "FF", -0.7938], ["Hector Neris", "2017-07-31", "FF", -0.7876], ["Hector Neris", "2017-07-31", "FF", -0.8419], ["Hector Neris", "2017-07-31", "FF", -0.9699], ["Hector Neris", "2017-07-31", "FF", -0.8357], ["Hector Neris", "2017-07-31", "FS", -0.8772], ["Hector Neris", "2017-07-31", "FF", -0.6558], ["Hector Neris", "2017-07-31", "FF", -0.6579]], "result": "ok"}

Rather than dumping all of your code here, try creating a [mcve]. This might help you find the problem on your own, and if not, it will certainly help us help you diagnose it. — Jean-François Corbett, Sep 01 '17 at 07:04
Sorry - thought I should be thorough because I'm not sure where the problem is coming from. — jcolombo24, Sep 01 '17 at 16:40

score 0 · Answer 1 · answered Aug 24 '18 at 14:01

Check this out. How to build up a HTML table with a simple for loop in Jinja2? You'll have to do something like:

<table>
  {% for x in pitcherlist%}
  <tr>
     <th width="5%">player_name</th>
     <th width="5%">game_date</th>
     <th width="5%">pitch_type</th>
     <th width="5%">pfx_x</th>
  </tr>
    <td>{{ x.player_name}}</td>
    <td>{{ x.game_date}}</td>
    <td>{{ x.pitch_type}}</td>
    <td>{{ x.pfx_x}}</td>
  </tr>

  {% endfor %}
</table>

Django Datatables Views doesn't display datatables, only json

1 Answers1