1-
21<link rel =" stylesheet" href =" /stylesheets/tablestyle.css" >
2+ <link rel =" stylesheet" type =" text/css" href =" https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" >
3+
4+ <section class =" intro" >
5+ <h1 class =" mb-5 mt-5" style =" text-align : center ; " >Leetcode Contests</h1 >
6+ <div class =" container" >
7+ <div class =" row justify-content-center" >
8+ <div class =" col-12" >
39
4- <section class =" intro" >
5- <h1 class =" mb-5 mt-5" style =" text-align : center ; " >Leetcode Contests</h1 >
6- <div class =" bg-image h-100" >
7- <div class =" mask d-flex align-items-center h-100" >
8- <div class =" container" >
9- <div class =" row justify-content-center" >
10- <div class =" col-12" >
11- <div class =" card" >
12- <div class =" card-body p-0" >
13- <div class =" table-responsive table-scroll" data-mdb-perfect-scrollbar =" true" style =" position : relative ; height : 700px " >
14- <table id =" data" class =" table table-striped mb-0" >
15- <thead style =" background-color : #002d72 ;" >
16- <tr >
17- <th scope =" col" >Contest Name</th >
18- <th scope =" col" >Type</th >
19- <th scope =" col" >Start Time</th >
20- <th scope =" col" >Duration</th >
21-
22- </tr >
23- </thead >
24- <tbody >
25- <% for ( let contest of contests ) { % >
26- < tr>
27- < td>< a href= " /contests/<%= contest._id %>/ranking/1" >< %= contest ._id % >< / a> < / td>
28- < % if (contest .startTime > Date .now ()) { % >
29- < td> Upcoming< / td>
30- < % } else { % >
31- < td> Virtual< / td>
32- < % } % >
33- < td>< %= contest .startTime % >< / td>
34- < td>< %= (contest .endTime - contest .startTime )/ 60000 % > minutes< / td>
35-
36- < / tr>
37- < % } %>
38-
39-
40- </tbody >
41- </table >
42- </div >
43- </div >
44- </div >
45- </div >
46- </div >
10+ <div class =" table-responsive table-scroll" >
11+ <table id =" contest-table" class =" table table-striped hover" >
12+ <thead >
13+ <tr >
14+ <th scope =" col" >Contest Name</th >
15+ <th scope =" col" >Type</th >
16+ <th scope =" col" >Start Time</th >
17+ <th scope =" col" >Duration</th >
18+ </tr >
19+ </thead >
20+ <tbody >
21+ <% for ( let contest of contests ) { % >
22+ < tr>
23+ < td>< a href= " /contests/<%= contest._id %>/ranking/1" style= " text-decoration:none" >< %= contest ._id % >< / a> < / td>
24+ < % if (contest .startTime > Date .now ()) { % >
25+ < td> Upcoming< / td>
26+ < % } else { % >
27+ < td> Virtual< / td>
28+ < % } % >
29+ < td>< %= contest .startTime % >< / td>
30+ < td>< %= (contest .endTime - contest .startTime )/ 60000 % > minutes< / td>
31+ < / tr>
32+ < % } %>
33+ </tbody >
34+ </table >
4735 </div >
4836 </div >
4937 </div >
50- </section >
51- <script >
52- $ (document ).ready (function (){
53- $ (' #data' ).after (' <div id="nav" class="pagination"></div>' );
54- var rowsShown = 50 ;
55- var rowsTotal = $ (' #data tbody tr' ).length ;
56- var numPages = rowsTotal/ rowsShown;
57- for (i = 0 ;i < numPages;i++ ) {
58- var pageNum = i + 1 ;
59- $ (' #nav' ).append (' <a href="#" rel="' + i+ ' ">' + pageNum+ ' </a> ' );
60- }
61- $ (' #data tbody tr' ).hide ();
62- $ (' #data tbody tr' ).slice (0 , rowsShown).show ();
63- $ (' #nav a:first' ).addClass (' active' );
64- $ (' #nav a' ).bind (' click' , function (){
38+ </div >
39+ </section >
6540
66- $ (' #nav a' ).removeClass (' active' );
67- $ (this ).addClass (' active' );
68- var currPage = $ (this ).attr (' rel' );
69- var startItem = currPage * rowsShown;
70- var endItem = startItem + rowsShown;
71- $ (' #data tbody tr' ).css (' opacity' ,' 0.0' ).hide ().slice (startItem, endItem).
72- css (' display' ,' table-row' ).animate ({opacity: 1 }, 300 );
73- });
74- });
75- </script >
41+ <script type =" text/javascript" charset =" utf8" src =" https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js" ></script >
42+ <script >
43+ $ (document ).ready (function () {
44+ $ (' #contest-table' ).DataTable ({
45+ " ordering" : false
46+ })
47+ });
48+ </script >
0 commit comments