jdb/new-life-songs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished out UI.

Browse Source
This commit is contained in:
Jonathan Bernard 2015-03-23 04:10:36 -05:00
parent 207e86de81
commit da3cf13267
6 changed files with 217 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
src/main/webapp/css/new-life-songs.scss
View File

@ -6,52 +6,127 @@
$dark: #333; $dark: #333;
$monoFont: 'Anonymous Pro';
$headFont: 'Roboto Condensed';
$bodyFont: 'Cantarell';
@import "forSize.mixin.scss"; @import "forSize.mixin.scss";
@import "reset.scss"; @import "reset.scss";
body { body {
color: $dark; color: $dark;
font-family: Cantarell; font-family: $bodyFont; }
margin: 2rem auto;
width: 60rem; }
header { header {
position: relative;
& > h1, & > h2 { & > h1 > a {
font-family: "Roboto Condensed"; color: $dark;
margin-bottom: 1.5em; } text-decoration: none; }
nav {
position: absolute;
top: 0;
right: 0;
ul {
list-style: none;
li {
display: block;
float: right;
padding: 0.4rem 0.6rem;
a { &> h1, & > h2 { font-family: $headFont; }
color: $dark;
display: block;
padding: 0.1rem 0.4rem;
text-decoration: none; }
a:hover { nav > ul > li > a {
background-color: $dark; color: $dark;
border-radius: 3px; display: block;
color: white; padding: 0.1rem 0.4rem;
} text-decoration: none;
} } } }
&:hover, &.current {
background-color: $dark;
border-radius: 3px;
color: white; } }
}
p { margin-top: 1rem; }
section {
margin-bottom: 2rem;
& > ul {
padding: 1rem 2rem;
a { color: $dark; }
a:visited { color: $dark; } } }
section#welcome { padding: 1rem; }
table { table {
th { font-family: "Roboto Condensed"; } th { font-family: $headFont; }
td a { td a {
color: $dark; color: $dark;
display: block; display: block;
text-decoration: none; } } text-decoration: none; } }
.api-doc {
pre, code {
background-color: #EEE;
font-family: $monoFont; }
pre { margin-left: 1rem; }
h3 { margin: 1rem 0; }
dl {
margin: 1rem;
& > dt {
background-color: #EEE;
font-family: $monoFont;
font-weight: bold; }
& > dd { padding: 0 0 0.5rem 1rem; } } }
@include forSize(notSmall) {
body { margin: 2rem auto; }
header {
position: relative;
& > h1, & > h2 { margin-bottom: 1.5em; }
nav {
position: absolute;
top: 0;
right: 0;
ul {
list-style: none;
li {
display: block;
float: right;
padding: 0.4rem 0.6rem;
} } } }
}
@include forSize(small) {
header {
margin-bottom: 1rem;
text-align: center;
& > h2 { display: none; }
& > h2.song-name, & > h2.service-date { display: block; }
& > nav > ul > li {
display: inline-block;
font-size: 125%;
width: 32%;
} }
section { font-size: 125%; }
.dataTables_length { display: none; }
table#songs-table {
td.artists, th.artists { display: none; } }
.not-small { display: none; }
}
@include forSize(medium) { body { width: 40rem; } }
@include forSize(large) { body { width: 60rem; } }

36
src/main/webapp/index.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="referrer" content="origin">
<link rel="shortcut icon" href="../images/favicon.ico">
<title>New Life Songs Database</title>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Cantarell' rel='stylesheet' type='text/css'>
<link href='css/new-life-songs-@version@.css' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>New Life Songs</h1>
<nav><ul>
<li><a href="admin/">Admin</a></li>
<li><a href="songs/">Songs</a></li>
<li><a href="services/">Services</a></li>
</ul></nav>
</header>
<section id=welcome>
This is Jonathan's database of worship songs performed at New Life
Austin. Please feel free to take a look around:
<ul><li><a href="songs/">Songs</a></li>
<li><a href="services/">Services</a></li>
<li><a href="doc/api/v1/">API Documentation</a>: Yes, you can
build apps around this database. <em>Under
construction.</em></li></ul>
<p>If you run across any problems, feel free to send me an email at
<a href='&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#106;&#100;&#98;&#101;&#114;&#110;&#97;&#114;&#100;&#64;&#103;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;'>&#106;&#100;&#98;&#101;&#114;&#110;&#97;&#114;&#100;&#64;&#103;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;</a>
</section>
</body>
</html>

52
src/main/webapp/service/index.gsp
View File

@ -18,6 +18,8 @@ if (!service) { response.sendError(response.SC_NOT_FOUND); return }
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="referrer" content="origin">
<link rel="shortcut icon" href="../images/favicon.ico"> <link rel="shortcut icon" href="../images/favicon.ico">
<title><%= service.@date.toString("yyyy-MM-dd") <title><%= service.@date.toString("yyyy-MM-dd")
@ -28,7 +30,8 @@ if (!service) { response.sendError(response.SC_NOT_FOUND); return }
<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script> <script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<!--<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>--> <!--<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>-->
<!--<script type="application/javascript" src="../js/new-life-songs-@version@.js"></script>--> <!--<script type="application/javascript" src="../js/new-life-songs-@version@.js"></script>-->
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto|Lato|Cuprum|Dosis|Cantarell' rel='stylesheet' type='text/css'> <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Cantarell' rel='stylesheet' type='text/css'>
<link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet' type='text/css'> <link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet' type='text/css'>
<link href='../css/new-life-songs-@version@.css' rel='stylesheet' type='text/css'> <link href='../css/new-life-songs-@version@.css' rel='stylesheet' type='text/css'>
</head> </head>
@ -48,44 +51,37 @@ if (!service) { response.sendError(response.SC_NOT_FOUND); return }
<h2>Performances</h2> <h2>Performances</h2>
<table id=performances-table class="row-border dataTable hover compact" cellspacing=0> <table id=performances-table class="row-border dataTable hover compact" cellspacing=0>
<thead><tr> <thead><tr>
<th class="dt-left">Song</th> <th class=actions />
<th class="dt-left">Artists</th> <th class="dt-left song-name">Song</th>
<th class="dt-left">Worship Leader</th> <th class="dt-left artists">Artists</th>
<th class="dt-left">Piano</th> <th class="dt-left not-small">Worship Leader</th>
<th class="dt-left">Organ</th> <th class="dt-left not-small">Piano</th>
<th class="dt-left">Bass</th> <th class="dt-left not-small">Organ</th>
<th class="dt-left">Drums</th> <th class="dt-left not-small">Bass</th>
<th class="dt-left">Guitar</th> <th class="dt-left not-small">Drums</th>
<th class="dt-left not-small">Guitar</th>
</tr></thead> </tr></thead>
<tbody> <tbody>
<% songsDB.findPerformancesForServiceId(service.id). <% songsDB.findPerformancesForServiceId(service.id).
collect { [perf: it, song: songsDB.findSong(it.songId)] }. collect { [perf: it, song: songsDB.findSong(it.songId)] }.
sort { it.song.name }.each { row -> %> sort { it.song.name }.each { row -> %>
<tr><td><a href='../song/<%= row.song.id %>'><%= <tr><td class=actions><a href="<%= NLSongsContext.makeUrl(service, row.song) %>"><i class="fa fa-download"></i></a></td>
<td class=song-name><a href='../song/<%= row.song.id %>'><%=
row.song.name %></a></td> row.song.name %></a></td>
<td><%= row.song.artists.join(", ") %></td> <td class=artists><%= row.song.artists.join(", ") %></td>
<td><%= row.perf.leader ?: "" %></td> <td class=not-small><%= row.perf.leader ?: "" %></td>
<td><%= row.perf.pianist ?: "" %></td> <td class=not-small><%= row.perf.pianist ?: "" %></td>
<td><%= row.perf.organist ?: "" %></td> <td class=not-small><%= row.perf.organist ?: "" %></td>
<td><%= row.perf.bassist ?: "" %></td> <td class=not-small><%= row.perf.bassist ?: "" %></td>
<td><%= row.perf.drummer ?: "" %></td> <td class=not-small><%= row.perf.drummer ?: "" %></td>
<td><%= row.perf.guitarist ?: "" %></td></tr><% } %> <td class=not-small><%= row.perf.guitarist ?: "" %></td></tr><% } %>
</tbody> </tbody>
<tfoot><tr>
<th class="dt-left">Song</th>
<th class="dt-left">Artists</th>
<th class="dt-left">Worship Leader</th>
<th class="dt-left">Piano</th>
<th class="dt-left">Organ</th>
<th class="dt-left">Bass</th>
<th class="dt-left">Drums</th>
<th class="dt-left">Guitar</th>
</tr></tfoot>
</table> </table>
</section> </section>
<script type="application/javascript"> <script type="application/javascript">
window.onload = function() { \$("#performances-table").dataTable(); }; window.onload = function() { \$("#performances-table").
dataTable({ "paging": false }); };
</script> </script>
</body> </body>

19
src/main/webapp/services/index.gsp
View File

@ -9,6 +9,8 @@ songsDB = NLSongsContext.songsDB
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="referrer" content="origin">
<link rel="shortcut icon" href="../images/favicon.ico"> <link rel="shortcut icon" href="../images/favicon.ico">
<title>Services - New Life Songs Database</title> <title>Services - New Life Songs Database</title>
@ -18,26 +20,26 @@ songsDB = NLSongsContext.songsDB
<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script> <script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<!--<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>--> <!--<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>-->
<!--<script type="application/javascript" src="../js/new-life-songs-@version@.js"></script>--> <!--<script type="application/javascript" src="../js/new-life-songs-@version@.js"></script>-->
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto|Lato|Cuprum|Dosis|Cantarell' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Cantarell' rel='stylesheet' type='text/css'>
<link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet' type='text/css'> <link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet' type='text/css'>
<link href='../css/new-life-songs-@version@.css' rel='stylesheet' type='text/css'> <link href='../css/new-life-songs-@version@.css' rel='stylesheet' type='text/css'>
</head> </head>
<body> <body>
<header> <header>
<h1>New Life Songs</h1> <h1><a href="../">New Life Songs</a></h1>
<h2>Services</h2> <h2>Services</h2>
<nav><ul> <nav><ul>
<li><a href="../admin/">Admin</a></li> <li><a href="../admin/">Admin</a></li>
<li><a href="../songs/">Songs</a></li> <li><a href="../songs/">Songs</a></li>
<li><a href="../services/">Services</a></li> <li><a href="../services/" class=current>Services</a></li>
</ul></nav> </ul></nav>
</header> </header>
<section class=services> <section class=services>
<table id=services-table class="row-border dataTable hover compact" cellspacing=0> <table id=services-table class="row-border dataTable hover compact" cellspacing=0>
<thead><tr> <thead><tr>
<th class="dt-left">Date</th> <th class="dt-left" class=date>Date</th>
<th class="dt-left">Service Type</th> <th class="dt-left service-type">Service Type</th>
</tr></thead> </tr></thead>
<tbody> <tbody>
<% songsDB.findAllServices().sort { it.date }.reverse().each { service -> %> <% songsDB.findAllServices().sort { it.date }.reverse().each { service -> %>
@ -45,15 +47,16 @@ songsDB = NLSongsContext.songsDB
service.@date.toString("yyyy-MM-dd") %></a></td> service.@date.toString("yyyy-MM-dd") %></a></td>
<td class=service-type><%= service.serviceType.displayName %></td></tr><% } %> <td class=service-type><%= service.serviceType.displayName %></td></tr><% } %>
</tbody> </tbody>
<tfoot><tr> <!--<tfoot><tr>
<th class="dt-left">Date</th> <th class="dt-left">Date</th>
<th class="dt-left">Service Type</th> <th class="dt-left">Service Type</th>
</tr></tfoot> </tr></tfoot>-->
</table> </table>
</section> </section>
<script type="application/javascript"> <script type="application/javascript">
window.onload = function() { \$("#services-table").dataTable(); }; window.onload = function() { \$("#services-table").
dataTable({ "paging": false }); };
</script> </script>
</body> </body>
</html> </html>

60
src/main/webapp/song/index.gsp
View File

@ -18,6 +18,8 @@ if (!song) { response.sendError(response.SC_NOT_FOUND); return }
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="referrer" content="origin">
<link rel="shortcut icon" href="../images/favicon.ico"> <link rel="shortcut icon" href="../images/favicon.ico">
<title><%= song.name %> - New Life Songs Database</title> <title><%= song.name %> - New Life Songs Database</title>
@ -27,14 +29,15 @@ if (!song) { response.sendError(response.SC_NOT_FOUND); return }
<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script> <script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<!--<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>--> <!--<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>-->
<!--<script type="application/javascript" src="../js/new-life-songs-@version@.js"></script>--> <!--<script type="application/javascript" src="../js/new-life-songs-@version@.js"></script>-->
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto|Lato|Cuprum|Dosis|Cantarell' rel='stylesheet' type='text/css'> <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Cantarell' rel='stylesheet' type='text/css'>
<link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet' type='text/css'> <link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet' type='text/css'>
<link href='../css/new-life-songs-@version@.css' rel='stylesheet' type='text/css'> <link href='../css/new-life-songs-@version@.css' rel='stylesheet' type='text/css'>
</head> </head>
<body> <body>
<header> <header>
<h1>New Life Songs</h1> <h1><a href="../">New Life Songs</a></h1>
<h2><%= song.name %></h2><% <h2 class=song-name><%= song.name %></h2><%
if (song.artists.findAll().size() > 0) { if (song.artists.findAll().size() > 0) {
%><h3>by <%= song.artists.join(", ") %></h3> <% } %> %><h3>by <%= song.artists.join(", ") %></h3> <% } %>
@ -48,48 +51,37 @@ if (!song) { response.sendError(response.SC_NOT_FOUND); return }
<h2>Performances</h2> <h2>Performances</h2>
<table id=performances-table class="row-border dataTable hover compact" cellspacing=0> <table id=performances-table class="row-border dataTable hover compact" cellspacing=0>
<thead><tr> <thead><tr>
<th class="dt-left">Date</th> <th class=actions />
<th class="dt-left">Service Type</th> <th class="dt-left performance-date">Date</th>
<th class="dt-left">Worship Leader</th> <th class="dt-left service-type">Service Type</th>
<th class="dt-left">Piano</th> <th class="dt-left not-small">Worship Leader</th>
<th class="dt-left">Organ</th> <th class="dt-left not-small">Piano</th>
<th class="dt-left">Bass</th> <th class="dt-left not-small">Organ</th>
<th class="dt-left">Drums</th> <th class="dt-left not-small">Bass</th>
<th class="dt-left">Guitar</th> <th class="dt-left not-small">Drums</th>
<th class="dt-left not-small">Guitar</th>
</tr></thead> </tr></thead>
<tbody> <tbody>
<% songsDB.findPerformancesForSongId(song.id). <% songsDB.findPerformancesForSongId(song.id).
collect { [perf: it, svc: songsDB.findService(it.serviceId)] }. collect { [perf: it, svc: songsDB.findService(it.serviceId)] }.
sort { it.svc.date }.each { row -> %> sort { it.svc.date }.each { row -> %>
<tr><td><a href='../service/<%= row.svc.id %>'><%= <tr><td class=actions><a href='<%= NLSongsContext.makeUrl(row.svc, song) %>'><i class="fa fa-download"></i></a></td>
<td class=performance-date><a href='../service/<%= row.svc.id %>'><%=
row.svc.@date.toString("yyyy-MM-dd") %></a></td> row.svc.@date.toString("yyyy-MM-dd") %></a></td>
<td><% switch (row.svc.serviceType) { <td class=service-type><%= row.svc.serviceType.displayName %></td>
case SUN_PM: out.print("Sunday PM"); break <td class=not-small><%= row.perf.leader ?: "" %></td>
case SUN_AM: out.print("Sunday AM"); break <td class=not-small><%= row.perf.pianist ?: "" %></td>
case WED: out.print("Wednesday"); break } <td class=not-small><%= row.perf.organist ?: "" %></td>
%></td> <td class=not-small><%= row.perf.bassist ?: "" %></td>
<td><%= row.perf.leader ?: "" %></td> <td class=not-small><%= row.perf.drummer ?: "" %></td>
<td><%= row.perf.pianist ?: "" %></td> <td class=not-small><%= row.perf.guitarist ?: "" %></td></tr><% } %>
<td><%= row.perf.organist ?: "" %></td>
<td><%= row.perf.bassist ?: "" %></td>
<td><%= row.perf.drummer ?: "" %></td>
<td><%= row.perf.guitarist ?: "" %></td></tr><% } %>
</tbody> </tbody>
<tfoot><tr>
<th class="dt-left">Date</th>
<th class="dt-left">Service Type</th>
<th class="dt-left">Worship Leader</th>
<th class="dt-left">Piano</th>
<th class="dt-left">Organ</th>
<th class="dt-left">Bass</th>
<th class="dt-left">Drums</th>
<th class="dt-left">Guitar</th>
</tr></tfoot>
</table> </table>
</section> </section>
<script type="application/javascript"> <script type="application/javascript">
window.onload = function() { \$("#performances-table").dataTable(); }; window.onload = function() { \$("#performances-table").
dataTable({ "paging": false }); };
</script> </script>
</body> </body>

23
src/main/webapp/songs/index.gsp
View File

@ -8,6 +8,8 @@ songsDB = NLSongsContext.songsDB
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="referrer" content="origin">
<link rel="shortcut icon" href="../images/favicon.ico"> <link rel="shortcut icon" href="../images/favicon.ico">
<title>Songs - New Life Songs Database</title> <title>Songs - New Life Songs Database</title>
@ -17,41 +19,42 @@ songsDB = NLSongsContext.songsDB
<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script> <script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<!--<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>--> <!--<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>-->
<!--<script type="application/javascript" src="../js/new-life-songs-@version@.js"></script>--> <!--<script type="application/javascript" src="../js/new-life-songs-@version@.js"></script>-->
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto|Lato|Cuprum|Dosis|Cantarell' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Cantarell' rel='stylesheet' type='text/css'>
<link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet' type='text/css'> <link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet' type='text/css'>
<link href='../css/new-life-songs-@version@.css' rel='stylesheet' type='text/css'> <link href='../css/new-life-songs-@version@.css' rel='stylesheet' type='text/css'>
</head> </head>
<body> <body>
<header> <header>
<h1>New Life Songs</h1> <h1><a href="../">New Life Songs</a></h1>
<h2>Songs</h2> <h2>Songs</h2>
<nav><ul> <nav><ul>
<li><a href="../admin/">Admin</a></li> <li><a href="../admin/">Admin</a></li>
<li><a href="../songs/">Songs</a></li> <li><a href="../songs/" class=current>Songs</a></li>
<li><a href="../services/">Services</a></li> <li><a href="../services/">Services</a></li>
</ul></nav> </ul></nav>
</header> </header>
<section class=songs> <section class=songs>
<table id=songs-table class="row-border dataTable hover compact" cellspacing=0> <table id=songs-table class="row-border dataTable hover compact" cellspacing=0>
<thead><tr> <thead><tr>
<th class="dt-left">Name</th> <th class="dt-left" class=song-name>Name</th>
<th class="dt-left">Artists</th> <th class="dt-left artists">Artists</th>
</tr></thead> </tr></thead>
<tbody> <tbody>
<% songsDB.findAllSongs().sort { it.name }.each { song -> %> <% songsDB.findAllSongs().sort { it.name }.each { song -> %>
<tr><td><a href='../song/<%= song.id %>'><%= song.name %></a></td> <tr><td class=song-name><a href='../song/<%= song.id %>'><%= song.name %></a></td>
<td><%= song.artists.join(", ") %></td></tr> <% } %> <td class=artists><%= song.artists.join(", ") %></td></tr> <% } %>
</tbody> </tbody>
<tfoot><tr> <!--<tfoot><tr>
<th class="dt-left">Name</th> <th class="dt-left">Name</th>
<th class="dt-left">Artists</th> <th class="dt-left">Artists</th>
</tr></tfoot> </tr></tfoot>-->
</table> </table>
</section> </section>
<script type="application/javascript"> <script type="application/javascript">
window.onload = function() { \$("#songs-table").dataTable(); }; window.onload = function() { \$("#songs-table").
dataTable({ "paging": false }); };
</script> </script>
</body> </body>