{% extends "base/Content.html" %}

{% block content %}

	<div class="panel panel-primary">
		
		<!-- Start: Table header -->
		<div class="panel-heading">
			{% block tableHeader %}{% endblock %}
		</div>
		<!-- End: Table header -->
		
		<!-- Start: Table Body -->
		<div class="panel-body">
			<div class="dataTable_wrapper">
				<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
					<thead>
						<tr>
							{% block tableColumnsHeaders %}{% endblock %}
						</tr>
					</thead>
					<tbody id="tableBody">
						{% block tableBody %}{% endblock %}
					</tbody>
				</table>
			</div>
		</div>
		<!-- End: Table Body -->
	
	</div>
{%endblock%}

{% extends "base/Content.html" %}

{% block content %}

	<div class="panel panel-primary">
		
		<!-- Start: Table header -->
		<div class="panel-heading">
			{% block tableHeader %}{% endblock %}
		</div>
		<!-- End: Table header -->
		
		<!-- Start: Table Body -->
		<div class="panel-body">
			<div class="dataTable_wrapper">
				<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
					<thead>
						<tr>
							{% block tableColumnsHeaders %}{% endblock %}
						</tr>
					</thead>
					<tbody id="tableBody">
						{% block tableBody %}{% endblock %}
					</tbody>
				</table>
			</div>
		</div>
		<!-- End: Table Body -->
	
	</div>

<script src="{{ url_for('static', filename='js/jquery-1.12.0.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/dataTables.bootstrap.min.js') }}"></script>
	
<script type="text/javascript">
	$(document).ready(function() {
		$('#dataTables-example').DataTable({
			responsive: true
		});
	});
</script>

{%endblock%}

Add script for data tables
[@matther2012] Add script for data tables
