ajaxtable.html (2363B)
1 <div id="{{ context.id_prefix }}deleteConfirmationModal" class="modal"> 2 <div class="modal-content"> 3 <h4>Delete Confirmation</h4> 4 <p>Are you sure you want to delete this item?</p> 5 </div> 6 <div class="modal-footer"> 7 <a href="#!" class="modal-close waves-effect waves-green btn-flat">Cancel</a> 8 <a href="#!" id="{{ context.id_prefix }}confirmDeleteButton" class="waves-effect waves-red btn-flat">Delete</a> 9 </div> 10 </div> 11 12 <div class="{{ context.id_prefix }}table-container"> 13 <!-- Search Bar --> 14 <div class="row"> 15 <div class="input-field col s10"> 16 <input type="text" id="{{ context.id_prefix }}search-bar" placeholder="Search..."> 17 </div> 18 <div class="input-field col s2 tooltipped" data-position="left" data-tooltip="Select page size"> 19 <select id="{{ context.id_prefix }}page-size"> 20 <option value="5">5</option> 21 <option value="10" selected>10</option> 22 <option value="25">25</option> 23 <option value="50">50</option> 24 </select> 25 </div> 26 </div> 27 28 <!-- Table --> 29 <table class="highlight {{ context.id_prefix }}table-instance"> 30 <thead id="{{ context.id_prefix }}table-headers"> 31 <tr> 32 {% for header, width in context.headers %} 33 <th {{context.id_prefix}}data-field="{{ header|lower }}" {{context.id_prefix}}data-order="asc" 34 class="sortable-header" style="width: {{ width }};">{{ 35 header }}{% if header %}<i class="material-icons tiny">unfold_more</i>{% endif %}</th> 36 {% endfor %} 37 </tr> 38 </thead> 39 <tbody id="{{ context.id_prefix }}table-body"> 40 <!-- Table data --> 41 </tbody> 42 </table> 43 44 <!-- Pagination --> 45 <ul class="pagination" id="{{ context.id_prefix }}pagination-container"> 46 <!-- Pagination content --> 47 </ul> 48 49 <script> 50 document.addEventListener('DOMContentLoaded', function() { 51 M.AutoInit(); 52 new AjaxTable('/api/{{ context.api_endpoint }}/', '{{ context.id_prefix }}', '{{ context.id_prefix }}table-headers', '{{ context.id_prefix }}table-body', '{{ context.id_prefix }}search-bar', '{{ context.id_prefix }}page-size', '{{ context.id_prefix }}pagination-container'); 53 }); 54 55 </script> 56 </div>