depot_django/templates/list-crud.html

{% extends base_template %}
{% load static %}

{% block content %}

    {% block filter %}
    {% endblock filter %}

    <table id="objectTable" class="table" data-selection-mode=
            {% block selection %}
             "single"
            {% endblock selection%}>
        <thead>
            <tr>
                {% block table_header %}
                {% endblock table_header %}
            </tr>
        </thead>
        <tbody>
            {% for object in objects %}
                <tr class="selectable-row" data-id="{{ object.id }}">
                        <td style="display: none;"><input type="checkbox" name="object_select" value="{{ object.id }}"></td>
                {% block table_data %}
                {% endblock table_data %}
                </tr>
            {% empty %}
                <tr>
                    <td colspan="100%">No data to display</td>
                </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                <td id="footerCell">
                    <div class="footer-container">
                        <div class="footer-left">
                            {% block buttons %}
                            {% endblock buttons %}
                            <button id="toggleSelectAllBtn" class="btn btn-secondary" style="display: none;">Select All</button>
                        </div>
                        <div class="footer-right">
                            {% if page_obj.has_previous %}
                                <a href="?page=1">&laquo; first</a>
                                <a href="?page={{ page_obj.previous_page_number }}">previous</a>
                            {% endif %}
                            <span class="page-number">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.</span>
                            {% if page_obj.has_next %}
                                <a href="?page={{ page_obj.next_page_number }}">next</a>
                                <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
                            {% endif %}
                        </div>
                    </div>
                </td>
            </tr>
        </tfoot>

    </table>
    <script>
      const table = document.getElementById('objectTable');
      const headerCells = table.querySelector('thead tr').children.length;
      const footerCell = document.getElementById('footerCell');
      footerCell.colSpan = headerCells;
      {#footerCell.style.textAlign = 'center';#}
    </script>


{% block custom_styles %}
<style>
    .selectable-row {
        cursor: pointer;
    }
    .selected-row {
        background-color: #e6f3ff;
    }
    .btn[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
    }
</style>
{% endblock custom_styles %}

{% block crud_js %}
    <script src="{% static 'js/crud-list.js' %}"></script>
{% endblock crud_js %}

{% endblock content %}