Templates - Subjects subpage

smash/web/templates/subjects/index.html

 {% extends "_base.html" %}
+{% load static %}
+
+{% block styles %}
+{{ block.super }}
+	<!-- DataTables -->
+  <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">
+{% endblock styles %}
 
 {% block page_title %}'subjects'{% endblock page_title %}
 {% block page_header %}Subjects{% endblock page_header %}
 {% block page_description %}{% endblock page_description %}
+
+{% block breadcrumb %}	
+			  <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
+			  <li class="active">Subjects</li>
+{% endblock breadcrumb %}
+
+{% block maincontent %}
+
+<div>
+	<a class="btn btn-app">
+		<i class="fa fa-plus"></i> Add new subject
+	</a>
+</div>
+
+<div class="box-body">
+	<table id="table" class="table table-bordered table-striped">
+		<thead>
+			<tr>
+				<th>No.</th>
+				<th>First name</th>
+				<th>Last name</th>
+				<th>Country</th>
+				<th>Language</th>
+				<th>Type</th>
+				<th>Last visit</th>
+				<th>Details</th>
+				<th>Edit</th>
+				<th>Resigned</th>
+			</tr>
+		</thead>
+	<tbody>
+		<tr>
+			<td>#1</td>
+			<td>Johny</td>
+			<td>English</td>
+			<td>Luxembourg</td>
+			<td><span class="label label-success">english</span></td>
+			<td>Patient - IPD</td>
+			<td>12-10-2016</td>
+			<td><button type="button" class="btn btn-block btn-default">Details</button></td>
+			<td><button type="button" class="btn btn-block btn-default">Edit</button></td>
+			<td>
+				<span class="label label-info">No</span>
+			</td>
+		</tr>
+		<tr>
+			<td>#2</td>
+			<td>Henry</td>
+			<td>French</td>
+			<td>France</td>
+			<td>
+				<span class="label label-success">english</span>
+				<span class="label label-success">french</span>
+			</td>
+			<td>Patient - IPD</td>
+			<td>12-10-2015</td>
+			<td><button type="button" class="btn btn-block btn-default">Details</button></td>
+			<td><button type="button" class="btn btn-block btn-default">Edit</button></td>
+			<td>
+				<span class="label label-info">No</span>
+			</td>
+		</tr>
+		<tr>
+			<td>#3</td>
+			<td>Karim</td>
+			<td>English</td>
+			<td>Luxembourg</td>
+			<td>
+				<span class="label label-success">english</span>
+				<span class="label label-success">french</span>
+			</td>
+			<td>Control</td>
+			<td>12-10-2016</td>
+			<td><button type="button" class="btn btn-block btn-default">Details</button></td>
+			<td><button type="button" class="btn btn-block btn-default">Edit</button></td>
+			<td>
+				<span class="label label-info">No</span>
+			</td>
+		</tr>
+	</tbody>
+	</table>
+</div>
+{% endblock maincontent %}
+
+{% block scripts %}
+	{{ block.super }}
+	
+	<script src="{% static 'AdminLTE/plugins/datatables/jquery.dataTables.min.js' %}"></script>
+	<script src="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
+	
+	<script>
+		$(function () {
+			$('#table').DataTable({
+			  "paging": true,
+			  "lengthChange": false,
+			  "searching": false,
+			  "ordering": true,
+			  "info": true,
+			  "autoWidth": false
+			});
+		});
+	</script>
+{% endblock scripts %}