1+
2+ <link rel =" stylesheet" href =" /stylesheets/tablestyle.css" >
3+
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>< %= contest ._id % > < / 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> 1.5 Hours < / td>
35+
36+ < / tr>
37+ < % } %>
38+
39+
40+ </tbody >
41+ </table >
42+ </div >
43+ </div >
44+ </div >
45+ </div >
46+ </div >
47+ </div >
48+ </div >
49+ </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 (){
65+
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 >
0 commit comments