From d89cb27b7dea72ae8a44a329a59a2c7b0c416338 Mon Sep 17 00:00:00 2001
From: Celestino Rey <creylopez@yahoo.es>
Date: Thu, 20 Jun 2024 17:13:47 +0200
Subject: [PATCH] =?UTF-8?q?En=20la=20tabla=20se=20puede=20ordenar=20por=20?=
 =?UTF-8?q?canci=C3=B3n=20y=20=C3=A1lbum?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 LyricsPy/templates/base.html   | 12 ++++++++++++
 LyricsPy/templates/index.html  |  2 +-
 LyricsPy/templates/search.html |  2 +-
 3 files changed, 14 insertions(+), 2 deletions(-)
diff --git a/LyricsPy/templates/base.html b/LyricsPy/templates/base.html
index d396d4b..ebacb20 100644
--- a/LyricsPy/templates/base.html
+++ b/LyricsPy/templates/base.html
@@ -4,6 +4,8 @@
     <meta charset="UTF-8">
     <title>My Song Lyrics</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <!-- DataTables CSS -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
 </head>
 <body>
     <div class="container">
@@ -20,7 +22,17 @@
         <hr>
         {% block content %}{% endblock %}
     </div>
+ 
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <!-- DataTables JS -->
+    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
+    
     <script>
+        $(document).ready(function() {
+            $('#songTable').DataTable();
+        });
+        
         function openTab(evt, tabName) {
             var i, tabcontent, tablinks;
             tabcontent = document.getElementsByClassName("tabcontent");
diff --git a/LyricsPy/templates/index.html b/LyricsPy/templates/index.html
index 82736fc..b8d9b86 100644
--- a/LyricsPy/templates/index.html
+++ b/LyricsPy/templates/index.html
@@ -9,7 +9,7 @@
 <div id="Songs" class="tabcontent">
     <h2>Song List</h2>
     {% if songs %}
-    <table>
+    <table id="songTable" class="display">
         <thead>
             <tr>
                 <th>Title</th>
diff --git a/LyricsPy/templates/search.html b/LyricsPy/templates/search.html
index 2031564..d0d6c03 100644
--- a/LyricsPy/templates/search.html
+++ b/LyricsPy/templates/search.html
@@ -4,7 +4,7 @@
 <h2>Search Results for "{{ query }}"</h2>
 
 {% if songs %}
-    <table>
+    <table id="songTable" class="display">
         <thead>
             <tr>
                 <th>Title</th>
