{% load bootstrap3 i18n %}
{% load eztables %}
{% load addcss %}
<h1>{{ child.heading }}</h1>
<table id="my-table-{{child.datatable_counter}}" class="table table-striped table-bordered">
    <thead>
    <tr>
        {% for field in child.fields %}
        <th>{{ field|titlify }}</th>
        {% endfor %}
    </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    <tr>
        {% for field in child.fields %}
        <th>{{ field|titlify }}</th>
        {% endfor %}
    </tr>
    </tfoot>
</table>
{% if child.datatable_type == 'json' %}
<script>
        $(document).ready(function(){
        $('#my-table-{{child.datatable_counter}}').dataTable({
        	"aaData": {{ child.url_param|safe }} ,
        	"aoColumns": [
				{% for field in child.fields %}
    				{ "sTitle": "{{ field|titlify }}",   "mData": "{{ field }}" },
    			{% endfor %}
    			],
   			"bPaginate": true,
               "sPaginationType": "bootstrap",
            }).columnFilter();
        });
</script>
{% else %}
<script>
        $(document).ready(function(){
        $('#my-table-{{child.datatable_counter}}').dataTable({
                "bPaginate": true,
                "sPaginationType": "bootstrap",
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "{{ child.url_param }}"
            }).columnFilter();
        });
</script>
{% endif %}
<!-- <div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        /.modal-content
    </div>
    /.modal-dialog
</div>/.modal

<script type="text/javascript">
$(document).ready(function() {

    $('.dataTable tbody').on('click', 'td a', function(event){
        event.preventDefault();
        var target = $(this).attr("href");
        $(".modal .modal-body").load(target, function() {
             $(".modal").modal("show");
        });
        return false;
    });
});


</script> -->