index.html

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

{% block styles %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">

{% endblock styles %}

{% block ui_active_tab %}'subjects'{% endblock ui_active_tab %}
{% 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">
        <table id="table" class="table table-bordered table-striped table-responsive">
            <thead>
            <tr>
                <th>ND</th>
                <th>Screening</th>
                <th>First name
                </th>
                <th>Last name</th>
                <th>Default location</th>
                <th>Deceased</th>
                <th>Resigned</th>
                <th>Postponed</th>
                <th>Info sent</th>
                <th>Edit</th>
            </tr>
            </thead>
            <tfoot style="display: table-header-group;">
            <tr>
                <th>
                    <div name="string_filter">ND</div>
                </th>
                <th>
                    <div name="string_filter">Screening number</div>
                </th>
                <th>
                    <div name="string_filter">Name</div>
                </th>
                <th>
                    <div name="string_filter">Surname</div>
                </th>
                <th>
                    <div name="location_filter">---</div>
                </th>
                <th>
                    <div name="yes_no_filter">---</div>
                </th>
                <th>
                    <div name="yes_no_filter">---</div>
                </th>
                <th>
                    <div name="yes_no_filter">---</div>
                </th>
                <th>
                    <div name="yes_no_filter">---</div>
                </th>
            </tr>
            </tfoot>

            <tbody>
            </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>
        $('#table tfoot div[name="string_filter"]').each(function () {
            var title = $(this).text();
            $(this).html('<input type="text" style="width:80px" placeholder="' + title + '" />');
        });

        $('#table tfoot div[name="yes_no_filter"]').each(function () {
            $(this).html('<select style="width:60px" ><option value selected="selected">---</option><option value="true">YES</option><option value="false">NO</option></select>');
        });

        $('#table tfoot div[name="location_filter"]').each(function () {
            var obj = $(this)
            obj.html('<select style="width:80px"><option value selected="selected">---</option></select>');
            $.get("{% url 'web.api.locations' %}", function (data) {
                $.each(data.locations, function (index, location) {
                    $('select', obj).append('<option value="' + location.id + '">' + location.name + '</option>');
                });
            });
        });

        $(function () {
            var table = $('#table').DataTable({
                pageLength: 25,
                stateSave: true,
                serverSide: true,
                processing: true,
                responsive: true,
                ajax: "{% url 'web.api.subjects' list_type %}",
                columns: [
                    {"data": "nd_number"},
                    {"data": "screening_number"},
                    {"data": "first_name"},
                    {"data": "last_name"},
                    {"data": "default_location"},
                    {"data": "dead"},
                    {"data": "resigned"},
                    {"data": "postponed"},
                    {"data": "information_sent"},
                    {"data": null}
                ],
                columnDefs: [{
                    "targets": 9,
                    "data": "id",
                    "defaultContent": '<a href="#" type="button" class="btn btn-block btn-default">Edit</a>'
                }]
            });

            $('#table tbody').on('click', 'a', function () {
                var data = table.row($(this).parents('tr')).data();
                var url = "{% url 'web.views.subject_edit' 12345 %}".replace(/12345/, data.id.toString());
                window.location.href = url;
            });

            // Apply the search
            table.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
                $('select', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });
            $('#table_filter').css("display", "none");
        });
    </script>

{% endblock scripts %}