27 – TABLE PAGINATION & SCROLL TO TOP – INVOICE MANAGEMENT SYSTEM

Let’s add pagination to our page. Make sure jQuery and Bootstrap are added on your page before proceeding.

1. Download pager plugin from this website and add the files to your application.

https://www.jqueryscript.net/table/Client-side-HTML-Table-Pagination-Plugin-with-jQuery-Paging.html

2. Add the pager scrip in your javascript file of your project and define how many line each page will be. In this example, I use 15 line per page.

$('.table').paging({limit:15});

3. Add the CSS files to style the navigation buttons

/*Table paination styling*/
.paging-nav {
  text-align: right;
  padding-top: 2px;
  font-size: 20px;
  padding-bottom: 10px;
}

.paging-nav a {
  margin: auto 1px;
  text-decoration: none;
  display: inline-block;
  padding: 1px 7px;
  background: #91b9e6;
  color: white;
  border-radius: 100px;
}

.paging-nav .selected-page {
  background: #187ed5;
  font-weight: bold;
}
/* End Table paination styling*/

Next let’s add the scroll to top button on the application. This will be hiden and only displayed when the user of the application scrolled down the page. This only require jQuery.

4. Add an element to be clicked to scroll to top.

<a href="#" class="scrollToTop">Scroll To Top</a>

5. Use CSS to style and hide the link. This should only be displayed when the user scroll down the page.

/*Scroll to top Styling*/
.scrollToTop{
	width:100px;
	padding:10px;
	text-align:center;
	font-weight: bold;
	text-decoration: none;
	position:fixed;
	bottom:10px;
	right:20px;
	display:none;
}
.scrollToTop:hover{
	text-decoration:none;
	opacity: 0.3;
}
/* End Scroll to top Styling*/

6. Now use jQuery to review the Scroll to top text when users scroll down the page

  // Scroll Top Script
   //Check to see if the window is top if not then display button
    $(window).scroll(function(){
      if ($(this).scrollTop() > 50) {
        $('.scrollToTop').fadeIn();
      } else {
        $('.scrollToTop').fadeOut();
      }
    });

7. Click to scroll to top

//Click event to scroll to top
    $('.scrollToTop').click(function(){
      $('html, body').animate({scrollTop : 0},800);
      return false;
    });
   //END Scroll Top Script