Template source: list.html

{% extends "base.html" %} {% block title %}Display Table{% endblock %} {% block metadata %} <meta charset="utf-8"> <meta name="description" content="Display the table with a delete and change button"> <!-- other html tags here --> {% endblock %} {% block content %} <script type="application/javascript"> {% comment %} This javascript forces a page refresh when page visited from back button {% endcomment %} $(window).bind("pageshow", function(event) { if (event.originalEvent.persisted) { window.location.reload(); } {% comment %} This is another javascript attempt to force a page refresh when the page is visited from the back button {% endcomment %} if(performance.navigation.type === 2){ location.reload(true); } }); </script> <style> /* below is my styling */ table, th, td { border: 1px solid gray; margin: 5px 0; border-collapse: collapse; padding: 10px } /* below is the styling that allows editing */ table { table-layout: fixed ; width: 100% ; } td { width: 25% ; } DIV.table { display:table; } FORM.tr, DIV.tr { display:table-row; } SPAN.td { display:table-cell; } {% comment %} Linda added .btn-space to put a space between the two buttons {% endcomment %} .btn-space { margin-right: 12px; } </style> <!-- ############################################################# --> <h1>Events </h1> <p><a href="create" role="button" id="btnFA" class="btn btn-primary"> <i class="fas fa-plus-circle"></i> Add </a> </p> <!-- This message is for the case where the user requested a delete and now we're returning to the table --> <!-- It is a django alert --> {% if messages %} {% for message in messages %} <!-- loop through just in case there's more than one message --> <div class="alert alert-success" role="alert"> <!-- wrap the django alert in bootstrap --> {{ message }} </div> {% endfor %} {% endif %} <p>Click to reset by date added: <button onclick="redirect(2)">Reset</button></p> <table id="myTable" class="table table-sm table-striped table-bordered" style="font-size: 12px"> <tr class="d-flex"> <td class="col-1"><button id="toggle" onclick=" sortTable(0)">Website</button></td> <td><button id="toggle" onclick="sortTable(3)">Title</button></td> <td style="word-wrap: break-word; max-width: 140px"><button id="toggle" onclick="sortTable(4)">Event Date and Time</button></td> <td style="word-wrap: break-word; max-width: 140px"><button id="toggle" onclick="sortTable(4)">Event Type</button></td> <td style="word-wrap: break-word; max-width: 140px"><button id="toggle" onclick="sortTable(4)">Event Target Identifier</button></td> <td>Primary Key (temporary)</td> <td>&nbsp.</td> </tr> {% for record in queryset %} <tr class="d-flex"> <td class="col-1"> {{ record.website }} </td> <td style="word-wrap: break-word; max-width: 140px"> {{ record.title | urlize }}</td> <td> {{ record.event_date_and_time }}</td> <td> {{ record.event_type }}</td> <td> {{ record.event_target_identifier }}</td> <td>{{ record.pk }}</td> <!-- temporary for testing purposes --> <td> <!-- The form below is for selecting one record to get more details --> <form action = "detail/{{record.id}}" method="get"> <div> <button style="float: none;" type="submit" id="btnFA" class="btn btn-primary btn-xs"> <i class="fas fa-edit"></i> Details </button> </div> <br /> </form> </td> </tr> {% endfor %} </table> <span style="clear:both"></span> <!-- This clears the two floats --> <p><a href="create" role="button" id="btnFA" class="btn btn-primary"> <i class="fas fa-plus-circle"></i> Add </a> </p> <script> function redirect() { window.location.assign('list') } </script> {% endblock content %}