fix: pagination active bug in datatable, close #208

zuramai · Mar 29, 2023 · 5a91943 · 5a91943
1 parent 50a7ca2
commit 5a91943
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/src/assets/static/js/pages/datatables.js b/src/assets/static/js/pages/datatables.js
@@ -1 +1,9 @@
 let jquery_datatable = $("#table1").DataTable()
+
+const setTableColor = () => {
+    document.querySelectorAll('.dataTables_paginate .pagination').forEach(dt => {
+        dt.classList.add('pagination-primary')
+    })
+}
+setTableColor()
+jquery_datatable.on('draw', setTableColor)
diff --git a/src/assets/static/js/pages/simple-datatables.js b/src/assets/static/js/pages/simple-datatables.js
@@ -36,11 +36,17 @@ function adaptPagination() {
   }
 }
 
+const refreshPagination = () => {
+  adaptPagination()
+}
+
 // Patch "per page dropdown" and pagination after table rendered
-dataTable.on("datatable.init", function () {
+dataTable.on("datatable.init", () => {
   adaptPageDropdown()
-  adaptPagination()
+  refreshPagination()
 })
+dataTable.on("datatable.update", refreshPagination)
+dataTable.on("datatable.sort", refreshPagination)
 
 // Re-patch pagination after the page was changed
 dataTable.on("datatable.page", adaptPagination)
diff --git a/src/table-datatable.html b/src/table-datatable.html
@@ -281,7 +281,7 @@ <h3>DataTable</h3>
 {% endblock %}
 {% block styles %}
 <link rel="stylesheet" href="assets/extensions/simple-datatables/style.css">
-<link rel="stylesheet" href="@/assets/scss/pages/simple-datatables.scss">
+<link rel="stylesheet" href="assets/scss/pages/simple-datatables.scss">
 {% endblock %}
 {% block js %}
 <script src="assets/extensions/simple-datatables/umd/simple-datatables.js"></script>