simple jquery pagination

by Muthuraman B

HTML

<table id="listTable" width="100%" class="table fundOnboardingReport" border="0">
  <thead>
    <tr>
      <th class="placeholder">REQ ID</th>
      <th class="placeholder">COUNTERPARTY</th>
      <th class="placeholder">CLIENT LEGAL ENTITY NAME</th>
      <th class="placeholder">LEI</th>
      <th class="placeholder">GO-LIVE DATE</th>
      <th class="placeholder">STATUS</th>
      <th class="placeholder">ASSIGNEES</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr class="graybg">
      <td><a>NFL00001</a></td>
      <td>JPMorgan EMEA Client Onboarding</td>
      <td><a>Walmart Retirement Savings Fund</a></td>
      <td>XXXXXXXXXXXXXXXX</td>
      <td><a>View All</a></td>
      <td>Completed</td>
      <td>2</td>
      <td class="f105">&nbsp;</td>
    </tr>
    <tr style="display:none;">
      <td colspan="8" class="text-center">Detail Empty</td>
    </tr>
    <tr class="graybg">
      <td><a>NFL00002</a></td>
      <td>JPMorgan EMEA Client Onboarding</td>
      <td><a>Walmart Retirement Savings Fund</a></td>
      <td>XXXXXXXXXXXXXXXX</td>
      <td><a>View All</a></td>
      <td>Completed</td>
      <td>2</td>
      <td class="f105">&nbsp;</td>
    </tr>
    <tr style="display:none;">
      <td colspan="8" class="text-center">Detail Empty</td>
    </tr>
    <tr class="graybg">
      <td><a>NFL00003</a></td>
      <td>JPMorgan EMEA Client Onboarding</td>
      <td><a>Walmart Retirement Savings Fund</a></td>
      <td>XXXXXXXXXXXXXXXX</td>
      <td><a>View All</a></td>
      <td>Completed</td>
      <td>2</td>
      <td class="f105">&nbsp;</td>
    </tr>
    <tr style="display:none;">
      <td colspan="8" class="text-center">Detail Empty</td>
    </tr>
    <tr class="graybg">
      <td><a>NFL00004</a></td>
      <td>JPMorgan EMEA Client Onboarding</td>
      <td><a>Walmart Retirement Savings Fund</a></td>
      <td>XXXXXXXXXXXXXXXX</td>
      <td><a>View All</a></td>
      <td>Completed</td>
      <td>2</td>
      <td class="f105">&nbsp;</td>
  ...

CSS

.prev,
.next,
.current-page {
  display: inline-block;
  margin: 0 5px;
  padding: 0 5px;
  font-weight: bold;
}

JavaScript

var articleLimit = 10;
var currentPage = 1;
var $currentPage = $('.current-page');
var $articles = $('#listTable').find('tr.graybg');
var totalArticles = $articles.length;

if($(totalArticles) > 10) {
	var totalPages = (totalArticles / articleLimit);
} else {
	var totalPages = (totalArticles);
}




$articles.hide();
$currentPage.html(currentPage);
changePage();

$('.next').on('click', function(){
	currentPage++;
  if (currentPage > totalPages) {
  	currentPage = 1;
  }
  changePage();
});
$('.prev').on('click', function(){
	currentPage--;
  if (currentPage < 1) {
  	currentPage = totalPages;
  }
  changePage();
});

function changePage() {
	$articles.hide();
  $currentPage.html(currentPage);
  $($articles[currentPage * articleLimit - 10]).show(); 
}