Although DataTables is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the aData initialisation parameter which takes an array of data, or using the sAjaxSource initialisation parameter which will have DataTables go to that source with an XHR call and load data from there. This example shows the latter method in action. DataTables expects an object with an array called "aaData" with the data source.
| Rendering engine |
Browser |
Platform(s) |
Engine version |
CSS grade |
| Rendering engine |
Browser |
Platform(s) |
Engine version |
CSS grade |
{#This prints the table with header when option.header==1 #}
{%if options['header'] == '1' %}
{%for col in a[0]%}
| {{col}} |
{%endfor%}
{%for key,row in a%}
{%if key=='0'%}
{% else %}
{%for col in row%}
| {{col}} |
{%endfor%}
{%endif%}
{%endfor%}
{%endif%}
{#This prints the table without header when option.header==0 #}
{%if options.header == '0' %}
{%for row in a%}
{%for col in row%}
| {{col}} |
{%endfor%}
{%endfor%}
{%endif%}
{% endblock %}
{% block javascripts %}
$('#demo').html( '
' );
$('#example').dataTable( {
"aaData": [
/* Reduced data set */
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
[ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
[ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
[ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
[ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
[ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
[ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
[ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{ "sTitle": "Grade", "sClass": "center" }
]
} );
{% endblock %}