index.html

{% extends "_base.html" %}
{% load static %}

{% block styles %}
{{ block.super }}
	{% include "includes/tablesorter.css.html" %}
{% endblock styles %}

{% block page_title %}'subjects'{% endblock page_title %}
{% block page_header %}Subjects{% endblock page_header %}
{% block page_description %}{% endblock page_description %}

{% block title %}{{ block.super }} - Subjects{% endblock %}

{% block breadcrumb %}
{% include "subjects/breadcrumb.html" %}
{% endblock breadcrumb %}

{% block maincontent %}

<div>
	<a href="{% url 'web.views.subject_add' %}" class="btn btn-app">
      <i class="fa fa-plus"></i>
      Add new subject
    </a>
</div>

<div class="box-body">
  {% if subjects_list %}
  <table id="table" class="table table-bordered table-striped tablesorter">
		<thead>
			<tr>
				<th>ND</th>
				<th>Screening</th>
				<th>First name</th>
				<th>Last name</th>
				<th>Country</th>
				<th></th>
				<th class="filter-select filter-exact" data-placeholder="Select type">Type</th>
				<th>Last visit</th>
				<th>Details</th>
				<th>Edit</th>
        <th>Delete</th>
			</tr>
		</thead>

		{% include "includes/tablesorter.tfoot.html" %}

	<tbody>
    {% for subject in subjects_list %}
		<tr>
			<td>{{ subject.nd_number }}</td>
			<td>{{ subject.screening_number }}</td>
			<td>{{ subject.first_name }}</td>
      <td>{{ subject.last_name }}</td>
      <td>{{ subject.country }}</td>
			<td>
        {% autoescape off %}
        {% for language in subject.languages.all %}
          {{language.image_img}}
        {% endfor %}
        {% endautoescape %}
      </td>
			<td>{{ subject.get_status_display }}</td>
			<td>12-10-2016</td>
			<td><a href="{% url 'web.views.subject_details' subject.id %}" type="button" class="btn btn-block btn-default">Details</a></td>
			<td><a href="{% url 'web.views.subject_edit' subject.id %}" type="button" class="btn btn-block btn-default">Edit</a></td>
      <td><a href="{% url 'web.views.subject_delete' subject.id %}" type="button" class="btn btn-block btn-default">Delete</a></td>
		</tr>
    {% endfor %}

	</tbody>
	</table>
  {% else %}
    <p>No subjects found.</p>
  {% endif %}
</div>
{% endblock maincontent %}

{% block scripts %}
	{{ block.super }}

	{% include "includes/tablesorter.js.html" %}

	<script>
		$(function () {
			$('#table').tablesorter({
				theme : "bootstrap",
				widthFixed: true,
				headerTemplate : '{content} {icon}',
				widgets : [ "uitheme", "filter", "columns", "zebra" ],
				widgetOptions : {
					zebra : ["even", "odd"],
					columns: [ "primary", "secondary", "tertiary" ],
					filter_reset : ".reset",
					filter_cssFilter: "form-control",
				},
				headers: {
					5: { sorter: false},
					8: { sorter: false},
					9: { sorter: false},
					10: { sorter: false}
				}
			}).tablesorterPager({
			    container: $(".ts-pager"),
			    cssGoto  : ".pagenum",
			    // remove rows from the table to speed up the sort of large tables.
			    // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
			    removeRows: false,
			    // output string - default is '{page}/{totalPages}';
			    // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
			    output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
			});
  		});
	</script>

{% endblock scripts %}