<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>
<body>
- <section>
- <h1>Last played songs</h1>
+ <nav>
+ <ul>
+ <li><a href="index.html">Proxy Radio</a></li>
+ <li class="selected">Played songs</li>
+ <li><a href="songs.html">All songs</a></li>
+ </ul>
+ </nav>
- <div class="history">
- </div>
+ <section>
+ <table id="history">
+ <thead>
+ <tr>
+ <th>Date</th>
+ <th>Song</th>
+ <th>Listeners</th>
+ </tr>
+ </thead>
+ </table>
</section>
<footer>