{% extends '::app.html.twig' %}

{% block title %}Symfony - AJAX{% endblock %}
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('css/demo_table.css') }}" rel="stylesheet" type="text/css" />


{% endblock %}

{% block body %}


<div id="template"></div>

<p>JAVASCRIPT AJAX</p>
<a id="link_users" href="#">Cargar users</a>

<h1>Table</h1>
			<div id="dynamic"></div>
			<div class="spacer"></div>
{% endblock %}



{% block javascripts %}
{{ parent() }}

<script>
$(document).ready(function(){
        $('#link_users').click(function(){
                $('#template').load("{{ path('UserBundle_javascript') }}");
        });
});
</script>
		<script type="text/javascript" charset="utf-8">
			/* Data set - can contain whatever information you want */
			var dbData = [
			{% for row in output.aaData %}
				            {# write a comma to separate elements unless it is first one... #}
				            {% if loop.index0 != 0 %},{% endif %}
				            {# its important to write quotes if elements are string in Javascript #}
						[
						{% for column in row %}
							{# write a comma to separate elements unless it is first one... #}
							{% if loop.index0 != 0 %},{% endif %}
							{# its important to write quotes if elements are string in Javascript #}
							"{{column}}"
						{% endfor %}
						]
				        {% endfor %}

			];
			var aHeaderSet=[
						{% for column in columns %}
							{# write a comma to separate elements unless it is first one... #}
							{% if loop.index0 != 0 %},{% endif %}
							{# its important to write quotes if elements are string in Javascript #}
							{"sTitle": "{{column}}", "sClass": "center"}
						{% endfor %}

			];			
			$(document).ready(function() {
				$('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="{{options.class}}" id="example"></table>' );
				$('#example').dataTable( {
					"aaData": dbData,
					"aoColumns": aHeaderSet
				} );	
			} );
		</script>
<script src="{{ asset('js/jquery.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dataTables.js') }}" type="text/javascript"></script>
{% endblock %}