1

I am trying to use datatables in a django application. Here is my code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> My web application </title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css" title="currentStyle"> @import "./DataTables-1.9.0/media/css/demo_table.css"; </style> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="./DataTables-1.9.0/media/js/jquery.dataTables.js"></script> <script> $(document).ready( function () { $('#table_id').dataTable(); } ); </script> </head> <body> {% if success %} <form action="." method="POST"> {{ my_form.as_p }} <input type="submit" value="Send"> <input type="reset" value="Reset"> </form> <br> <table id="table_id" class="display"> <thead> <tr> {%for x in htl%} <th> {{x}} </th> {% endfor%} </tr> </thead> <tbody> {% for x in mytable %} <tr> {% for y in x %} <td> {{y}} </td> {%endfor %} </tr> {% endfor%} </tbody> </table> {% else %} <form action="." method="POST"> {{ my_form.as_p }} <input type="submit" value="Send"> <input type="reset" value="Reset"> </form> {% endif %} </body> </html>

I want to pass a python list with each row as an item in the list and format the table in the template.html as is seen from the code. I couldn't get datatables working at all. Any ideas? Thanks

Improve this question
2
  • 2
    Just a quick guess, but i would say the style import has to occur before you load the javascript. Commented Apr 6, 2012 at 14:17
  • I moved the style import to above the javascript but nothing changed, thanks for the input though. Commented Apr 6, 2012 at 14:47

1 Answer 1

Reset to default
4

I think your HTML might be bad:

<thead> <tr> {%for x in htl%} <th> {{x}} </th> {% endfor%} </th> </thead>

That second </th> should be </tr>

Also, you may want to check out this: https://github.com/eire1130/Django_datatables

It's a wrapper I wrote to simplify embedding datatables into django templates.

Also, i notice you are using {% block %}, but I don't see what you are extending?

Edit for configuring media and static files:

At the very top of your settings.py add these lines:

import os ROOT_PATH = os.path.dirname(__file__)

(you should do this in all of your projects, doing this will save you a lot of headaches in the future)

Also, in your settings.py you should go down to about midway through the file and look four lines (really two, but we will also do static at the same time)

MEDIA_ROOT = os.path.join(ROOT_PATH, 'media/') MEDIA_URL = 'http://127.0.0.1:8000/media/'

The above will set up your media files in a director like myproject/media where your app is located at myproject/myapp

STATIC_ROOT = os.path.join(ROOT_PATH, 'static/') STATIC_URL = 'http://127.0.0.1:8000/static/'

The above will set up your static files in a directory like myproject/static where your app is located at myproject/myapp.

In the same directory where settings.py is located, create a file called "urls.py" if your old urls.py is already here, move it to your app folder, so your old urls.py should be located at myproject/myapp/urls.py.

Your new urls.py should be located at myproject/urls.py

In this new and totally blank python file, add these lines:

from django.conf.urls.defaults import patterns, include, url from django.conf import settings urlpatterns = patterns('', (r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT }), (r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT }), (r'^', include('myproject.myapp.urls')),

)

Please note the "include" at the very bottom. Obviously, you will need to change this to reflect your project and app names.

Now that this is setup, you will need to create a media folder that resides at myproject/media. You should do the same for /static while your at it.

In this directory, you should place any media files you care about. For example, I have a folder called "plugins", in there is datatables. The path looks like this: myproject/media/plugins/datables, and then in there are all the datatables files.

Now, in your template, point the link to the directory:

'/media/plugins/datatables/media/js/jquery.dataTables.min.js'

Notice there is no "." at the beginning, and no @include. Just the url.

This should setup datatables for you and allow to serve media at the same time. In a production environment, you wouldn't do it exactly like this, but for prototyping and learning, this will work fine

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

The usage of {% block %} does not necessarily mean he is extending another template. The shown template could also be the basetemplate, and the block-tags are there to be able to override these parts from a childtemplate.
@marue I know, I was just wondering if he showed us a code snippet, or if there was information missing.
I made the two changes mentioned in the comments </th> to </tr> (thanks for the catch) , Ialso moved the style import to above the javascript code. Updated code is replaced the old one in the question, still not working though. I looked at the Django_datatables and tried to use the load_once example but I can;t seem to get it to work with my application, thanks for the help.
@biomed without using datatables, is the HTML table rendering as expected (just take out the javascript call to datatables)?
@biomed In that case, are you using firebug? Are there any errors getting thrown in developer console?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.