Easy Fast Table Pagination JavaScript Library – paginationTable.js

Preview:

Description:

Table pagination can be a pain. There are a lot of different methods for JavaScript pagination and most of them require you to pass in arguments to customize the table layout.

In this post, I’d like to share you with the paginationTable.js library that makes table pagination easy without any customizations. That’s right, you simply pass in the data and it handles the rest.

How to use it:

1. Include the stylesheet paginationTable.css and JavaScript paginationTable.js.

<link rel="stylesheet" href="paginationTable.css" />
<script src="paginationTable.js"></script>

2. Initialize the paginationTable on the existing HTML table and specify how many rows per page. That’s it.

<table id="example">
  <thead>        
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Paginator.init({
  tableID: "example", 
  rows: 5, 
});

3. Set the number of table headers. Default: 1.

Paginator.init({
  tableID: "example", 
  rows: 5, 
  headers: 2,
});

4. Set the max number of pages displayed in the pagination navigation. Default: 5.

Paginator.init({
  tableID: "example", 
  rows: 5, 
  navRange: 6,
});

5. Apply custom CSS styles to the pagination navigation. Default: ‘default’.

Paginator.init({
  tableID: "example", 
  rows: 5, 
  navStyle: 'custom',
});

/* --------- custom ----------- */
.custom-pg-nav-content{
  display: flex;    
  align-items: center;
  height: 30px;    
  color:rgb(105, 127, 199);          
  width: fit-content;
  background: white;        
  font-size: 16px;;
}
/* next and prev buttons */
.custom-pg-nav-content [data-dir]{            
  display: flex;
  justify-content: center;
  align-items: center;    
  height: 100%;
  width: 60px;          
  cursor: pointer;
  transition: 0.2 ease-in;        
  border-top: 1px solid rgb(194, 194, 194);
  border-bottom: 1px solid rgb(194, 194, 194);    
}
/* hover option on buttons */
.custom-pg-nav-content [data-dir]:hover{         
  background: rgb(224, 229, 250);               
}
/* 'first' button */
.custom-pg-nav-content .nav-first-page {  
  width: 50px;                  
  justify-content: left;    
  padding-left: 10px;
}
/* 'last' button */
.custom-pg-nav-content .nav-last-page {                
  width: 50px;                  
  justify-content: right;    
  padding-right: 10px;
}
/* first and last buttons */
.custom-pg-nav-content .nav-single-op{        
  display: flex;    
  align-items: center;             
  cursor: pointer;
}
/* spacers between button options */
.custom-pg-nav-content .btn-hz-spacer{    
  /* width: 16px; */
}
.custom-pg-nav-content .pg-hz-spacer{    
  
}
/* number containers */
.custom-pg-nav-content .nav-pages-container{
  display: flex;
  height: 100%;
}
/* page buttons parent container */
.custom-pg-nav-content .pg-nav-numbers{
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;    
  height: 100%;    
}
/* page buttons */
.custom-pg-nav-content .pg-num-val{        
  font-size: 16px;
  width: 15px;           
  text-align: center;
  transition: 0.3s ease-in;
  cursor: pointer;            
  width: 28px;    
  line-height: 30px;
  border-top: 1px solid rgb(194, 194, 194);
  border-bottom: 1px solid rgb(194, 194, 194);    
  
}
/* page button hover */
.custom-pg-nav-content .pg-num-val:hover{
  background: rgb(224, 229, 250);       
}
/* page button active class*/
.custom-pg-nav-content .pg-num-active{        
  background: rgb(0, 51, 255) !important;   
  color: white !important;
  font-weight: bold;
}