Created
August 19, 2013 19:47
-
-
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!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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