Skip to content

Instantly share code, notes, and snippets.

@clarle
Created August 19, 2013 19:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save clarle/6273223 to your computer and use it in GitHub Desktop.
Save clarle/6273223 to your computer and use it in GitHub Desktop.
Rendering Django data as a YUI DataTable - Remember to escape and validate user input before displaying it though!
<html>
<head>
<script src="http://yui.yahooapis.com/3.11.0/build/yui/yui-min.js"></script>
</head>
<body>
<div class="example yui3-skin-sam">
<div id="simple"></div>
</div>
<script>
YUI().use("datatable", function (Y) {
var simple = new Y.DataTable({
columns: {{ table.keys | safe}},
data: {{ table.data | safe }},
summary: {{ table.summary | safe }},
caption: {{ table.caption | safe}}
});
simple.render("#simple");
});
</script>
</body>
</html>
from django.shortcuts import render
def index(request):
# This data can be obtained from a database, or wherever
TABLE_DATA = [
{ "id": "ga_3475", "name": "gadget", "price": "$6.99" },
{ "id": "sp_9980", "name": "sprocket", "price": "$3.75" },
{ "id": "wi_0650", "name": "widget", "price": "$4.25" }
]
TABLE_KEYS = TABLE_DATA[0].keys()
TABLE_SUMMARY = "\"Price sheet for inventory parts\""
TABLE_CAPTION = "\"Example table with simple columns\""
TABLE = {
"data": TABLE_DATA,
"keys": TABLE_KEYS,
"summary": TABLE_SUMMARY,
"caption": TABLE_CAPTION
}
return render(request, 'index.html', { "table": TABLE });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment