Implement DataTable for user and world management.

WaterWolfDev · Jul 23, 2024 · 4832493 · 4832493
1 parent 7b7d5f6
commit 4832493
Show file tree

Hide file tree

Showing 5 changed files with 565 additions and 78 deletions.
diff --git a/backend/templates/dashboard/admin/users.twig b/backend/templates/dashboard/admin/users.twig
@@ -5,38 +5,11 @@
 {% block head %}
  {{ parent() }}
 
- <script>
- function doFilter(filter, selector) {
- if (filter === '') {
- $(selector).removeClass('d-none');
- } else {
- $(selector).each(function() {
- const searchData = $.map(
- $(this).find('.search'),
- function(element) {
- return $(element).text()
- }
- ).join(' ');
-
- if (!searchData.toUpperCase().includes(filter)) {
- $(this).addClass('d-none');
- } else {
- $(this).removeClass('d-none');
- }
- });
- }
- }
-
- function filterTable(event) {
- doFilter(
- event.target.value.toUpperCase(),
- '#data_table tbody tr'
- );
- }
+ {{ renderAssets('frontend/dataTable.js') }}
 
+ <script>
  ready(() => {
- document.querySelector('#search_input').addEventListener('load', filterTable, false);
- document.querySelector('#search_input').addEventListener('keyup', filterTable, false);
+ let dataTable = new DataTable('#data_table');
  });
  </script>
 {% endblock %}
@@ -53,10 +26,6 @@
 
  <div class="card">
  <div class="card-body">
- <input id="search_input" class="form-control" value="" type="text" Placeholder="Search..." />
-
- <br>
-
  <table class="table table-sm table-striped table-bordered align-middle mb-0" id="data_table">
  <thead>
  <tr>
@@ -67,7 +36,7 @@
  <th scope="col" style="width:10%">Team?</th>
  <th scope="col" style="width:10%">DJ?</th>
  <th scope="col" style="width:10%">Banned?</th>
- <th scope="col" style="width:15%">Actions</th>
+ <th data-dt-order="disable" scope="col" style="width:15%">Actions</th>
  </tr>
  </thead>
  <tbody>

diff --git a/backend/templates/dashboard/admin/worlds/list.twig b/backend/templates/dashboard/admin/worlds/list.twig
@@ -5,38 +5,11 @@
 {% block head %}
  {{ parent() }}
 
- <script>
- function doFilter(filter, selector) {
- if (filter === '') {
- $(selector).removeClass('d-none');
- } else {
- $(selector).each(function() {
- const searchData = $.map(
- $(this).find('.search'),
- function(element) {
- return $(element).text()
- }
- ).join(' ');
-
- if (!searchData.toUpperCase().includes(filter)) {
- $(this).addClass('d-none');
- } else {
- $(this).removeClass('d-none');
- }
- });
- }
- }
-
- function filterTable(event) {
- doFilter(
- event.target.value.toUpperCase(),
- '#data_table tbody tr'
- );
- }
+ {{ renderAssets('frontend/dataTable.js') }}
 
+ <script>
  ready(() => {
- document.querySelector('#search_input').addEventListener('load', filterTable, false);
- document.querySelector('#search_input').addEventListener('keyup', filterTable, false);
+ let dataTable = new DataTable('#data_table');
  });
  </script>
 {% endblock %}
@@ -53,30 +26,26 @@
 
  <div class="card">
  <div class="card-body">
- <div class="d-flex align-items-center mb-3">
- <div class="flex-fill">
- <input id="search_input" class="form-control" value="" type="text" Placeholder="Search..." />
- </div>
- <div class="ms-3 flex-shrink-0">
- <a href="{{ urlFor('dashboard:admin:worlds:create') }}" class="btn btn btn-success">
- Add New Spotlighted World
- </a>
- </div>
+ <div class="buttons mb-3">
+ <a href="{{ urlFor('dashboard:admin:worlds:create') }}" class="btn btn btn-success">
+ <i class="bi-plus-circle-fill"></i> Add New Spotlighted World
+ </a>
  </div>
 
- <table class="table table-sm table-striped table-bordered align-middle mb-0" id="data_table">
+ <table class="table table-sm table-striped table-bordered align-middle mb-0" id="data_table"
+ data-order="[[1, &quot;asc&quot;]]">
  <thead>
  <tr>
- <th scope="col" style="width:15%">Image</th>
+ <th data-dt-order="disable" scope="col" style="width:15%">Image</th>
  <th scope="col" style="width:70%">World Name</th>
- <th scope="col" style="width:15%">Actions</th>
+ <th data-dt-order="disable" scope="col" style="width:15%">Actions</th>
  </tr>
  </thead>
  <tbody>
  {% for row in worlds %}
  <tr>
  <td>
- <img src="{{ mediaUrl(row.image) }}" style="max-width: 128px;">
+ <img src="{{ mediaUrl(row.image) }}" alt="World Image" loading="lazy" style="max-width: 128px;">
  </td>
  <th class="search" scope="row">{{ row.title }}</th>
  <td>

diff --git a/frontend/dataTable.js b/frontend/dataTable.js
@@ -0,0 +1,4 @@
+import DataTable from 'datatables.net-bs5';
+import "datatables.net-bs5/css/dataTables.bootstrap5.css";
+
+window.DataTable = DataTable;