core/templates/topic/detail.html

{% extends "base.html" %}
{% block title %}{{ item.name }}{% endblock %}
{% block css %}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css">
<style>
    table#authors-table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100px;
        /* Set a maximum width for the cells */
    }
</style>
{% endblock %}
{% block content %}
<h2>{{ item.name }}</h2>
<h3>Researchers in this Topic:</h3>
<table id="authors-table" class="display responsive nowrap" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Affiliation</th>
            <th>i10</th>
            <th>Cited</th>
            <th>Works</th>
            <th>Active</th>
        </tr>
    </thead>
    <tbody>
        {% for author_topic in authors %}
        <tr>
            <td>
                <a href="{% url 'author_detail' author_topic.author.id %}">
                    {{ author_topic.author.name }}
                </a>
            </td>
            <td>
                {% with author_topic.author.latest_affiliation as affiliation %}
                {% if affiliation %}
                {{ affiliation.institution.name }}
                {% else %}
                Latest affiliation
                {% endif %}
                {% endwith %}
            </td>
            <td>{{ author_topic.author.i10_index }}</td>
            <td>{{ author_topic.author.cited_by_count }}</td>
            <td>{{ author_topic.author.works_count }}</td>
            <td>
                {% with author_topic.author.yearly_stats.last as last_stat %}
                {% if last_stat %}
                {{ last_stat.year }}
                {% else %}
                0-N/A
                {% endif %}
                {% endwith %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}
{% block js %}
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        $('#authors-table').DataTable({
            responsive: true, // Ensures responsiveness
            search: true,
            paging: true,
            ordering: true, // Enables column ordering
            info: true,
            order: [], // No initial sorting; users can sort as needed
        });
    });
</script>
{% endblock %}