improved

[radio.git] / html / last_songs.html

diff --git a/html/last_songs.html b/html/last_songs.html
index 2d58323..dcacb71 100644 (file)
--- a/html/last_songs.html
+++ b/html/last_songs.html
@@ -6,18 +6,30 @@
         <link rel="stylesheet" type="text/css" media="all" href="style.css" />
         <title>Last played songs</title>
 
+        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
+
         <script type="text/javascript"
                 language="javascript"
-                src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
+                src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
+        </script>
+
+        <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js">
         </script>
 
         <script>$(document).ready(function() {
                 $.getJSON("http://radio.wpitchoune.net/cgi-bin/icecast_last_songs.cgi",
                           function(data) {
                         $.each(data, function(i, value) {
-                                $("#history").append(value);
+                                $("#history").append("<tr><td>" + value.date + "</td>"
+                                                     + "<td>" + value.song + "</td>"
+                                                     + "<td>" + value.listeners + "</td>"
+                                                     + "</tr>");
                         });
+
+                        $('#history').DataTable();
                 });
+
+
         });
         </script>
 </head>
@@ -26,8 +38,15 @@
         <section>
                 <h1>Last played songs</h1>
 
-                <div class="history">
-                </div>
+                <table id="history">
+                        <thead>
+                                <tr>
+                                        <th>Date</th>
+                                        <th>Song</th>
+                                        <th>Listeners</th>
+                                </tr>
+                        </thead>
+                </table>
         </section>
 
         <footer>