Skip to content

Instantly share code, notes, and snippets.

/PaginationSearchAndFilter.html

Created September 15, 2017 19:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/42757dc9bc70017d77df62b9c411e38f to your computer and use it in GitHub Desktop.
Save anonymous/42757dc9bc70017d77df62b9c411e38f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
PaginationSearchAndFilter.html
<html>
<head>
<link rel="stylesheet" href="http://ianmcburnie.github.io/mindpatterns/css/main.css">
<link rel="stylesheet" href="http://ianmcburnie.github.io/mindpatterns/navigation/pagination/pagination.css">
<script src="http://ianmcburnie.github.io/mindpatterns/static/browser.js"></script>
<script src="http://ianmcburnie.github.io/mindpatterns/navigation/pagination/jquery.pagination.js"></script>
<script type="text/javascript">
function changeFilter() {
var $table = document.getElementById("myTable");
$table.setAttribute('page','1'); // Reset Pagination because filter may change number of results to smaller amount and may be on a large page number
buildTableAndPagination();
}
function changePagination() {
$anchor = $(this)[0];
console.log("$anchor.getAttribute('aria-disabled'):"+$anchor.getAttribute('aria-disabled'));
if($anchor.getAttribute('aria-disabled') === null || $anchor.getAttribute('aria-disabled') === 'false') {
$page = $anchor.getAttribute('page');
var $table = document.getElementById("myTable");
$table.setAttribute('page', $page);
buildTableAndPagination();
}
}
function buildTableAndPagination() {
// Declare variables
var $input = document.getElementById("myInput");
var $filter = $input.value;
var $table = document.getElementById("myTable");
var $trs = $table.getElementsByTagName("tr");
var $resultsPerPage = $table.getAttribute('resultsPerPage');
var $page = $table.getAttribute('page');
var $numberOfResultsToSkip = $resultsPerPage*($page-1);
console.log("buildTableAndPagination $resultsPerPage:"+$resultsPerPage+" $numberOfResultsToSkip:"+$numberOfResultsToSkip+" $page:"+$page);
// Loop through all table rows, and hide those who don't match the search query
var $numberOfResultsBasedOnFilterShown = 0;
var $numberOfResultsBasedOnFilterTotal = 0;
var $numberOfResultsBasedOnFilterSkipped = 0;
var $lastShown = 0; // For last page, lastShown might be 17 rather than showing 10-19 when resultsPerPage is 10 and there are 17 results
// Configure Table
for (i = 1; i < $trs.length; i++) {
var $tr = $trs[i]; // ith row
if(rowPassesFilter($tr, $filter)) {
if($numberOfResultsBasedOnFilterSkipped < $numberOfResultsToSkip) {
// Skip these
$tr.style.display = "none";
$numberOfResultsBasedOnFilterSkipped = $numberOfResultsBasedOnFilterSkipped + 1;
$numberOfResultsBasedOnFilterTotal = $numberOfResultsBasedOnFilterTotal + 1;
} else if($numberOfResultsBasedOnFilterShown < $resultsPerPage) {
// Show these
$tr.style.display = "";
$numberOfResultsBasedOnFilterShown = $numberOfResultsBasedOnFilterShown + 1;
$numberOfResultsBasedOnFilterTotal = $numberOfResultsBasedOnFilterTotal + 1;
$lastShown = $numberOfResultsBasedOnFilterSkipped + $numberOfResultsBasedOnFilterShown;
} else {
// Hide these
$tr.style.display = "none";
$numberOfResultsBasedOnFilterTotal = $numberOfResultsBasedOnFilterTotal + 1;
}
} else {
$tr.style.display = "none";
}
}
console.log("$numberOfResultsBasedOnFilterShown:"+$numberOfResultsBasedOnFilterShown+"$numberOfResultsBasedOnFilterTotal:"+$numberOfResultsBasedOnFilterTotal);
// Configur Pagination Label
var $spanLabel = document.getElementById("paginationLabel");
$spanLabel.innerHTML = "Showing "+($resultsPerPage*(+$page-1)+1)+" - "+$lastShown+" of "+$numberOfResultsBasedOnFilterTotal;
// Configure Pagination
var $previous = document.getElementsByClassName("pagination__previous")[0];
$previous.setAttribute('page', +$page-1);
$previous.setAttribute('aria-disabled', true);
var $firstPage = document.getElementsByClassName("pagination__item")[0];
$firstPage.setAttribute('page', +$page-2);
$firstPage.innerHTML = +$page-2;
$firstPage.style='visibility:hidden;';
var $secondPage = document.getElementsByClassName("pagination__item")[1];
$secondPage.setAttribute('page', +$page-1);
$secondPage.innerHTML = +$page-1;
$secondPage.style='visibility:hidden;';
var $thirdPage = document.getElementsByClassName("pagination__item")[2];
$thirdPage.setAttribute('page', +$page);
$thirdPage.innerHTML = +$page;
$thirdPage.style='visibility:visible;';
var $fourthPage = document.getElementsByClassName("pagination__item")[3];
$fourthPage.setAttribute('page', +$page+1);
$fourthPage.innerHTML = +$page+1;
$fourthPage.style='visibility:hidden;';
var $fifthPage = document.getElementsByClassName("pagination__item")[4];
$fifthPage.setAttribute('page', +$page+2);
$fifthPage.innerHTML = +$page+2;
$fifthPage.style='visibility:hidden;';
var $next = document.getElementsByClassName("pagination__next")[0];
$next.setAttribute('page', +$page+1);
$next.setAttribute('aria-disabled', true);
if(+$page - 2 >= 1) {
$firstPage.style='visibility:visible;';
}
if(+$page - 1 >= 1) {
$secondPage.style='visibility:visible;';
$previous.setAttribute('aria-disabled', false);
}
var $numberOfTotalPages = Math.ceil($numberOfResultsBasedOnFilterTotal/$resultsPerPage);
console.log("$numberOfTotalPages:"+$numberOfTotalPages);
if(+$page + 1 <= $numberOfTotalPages) {
$fourthPage.style='visibility:visible;';
$next.setAttribute('aria-disabled', false);
}
if(+$page + 2 <= $numberOfTotalPages) {
$fifthPage.style='visibility:visible;';
}
}
function rowPassesFilter($tr, $filter) {
var $td = $tr.getElementsByTagName("td")[0]; // Check if first column contains filter string
if ($td && $td.innerHTML.toUpperCase().indexOf($filter.toUpperCase()) > -1) {
return true;
}
return false;
}
</script>
<script type="text/javascript">
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Query Parameters are resultsPerPage, page and filter
$(document).ready(function() {
$(document).on("click", ".pagination__item", changePagination);
$(document).on("click", ".pagination__previous", changePagination);
$(document).on("click", ".pagination__next", changePagination);
var $table = document.getElementById("myTable");
var $input = document.getElementById("myInput");
var $resultsPerPage=getParameterByName('resultsPerPage');
if($resultsPerPage == null) {
$resultsPerPage = 10;
}
$table.setAttribute('resultsPerPage', $resultsPerPage);
var $page=getParameterByName('page');
if($page == null) {
$page = 1;
}
$table.setAttribute('page', $page);
var $filter=getParameterByName('filter');
if($filter == null) {
$filter = '';
}
$input.value = $filter;
buildTableAndPagination();
});
</script>
<script>
$('.pagination--ajax').pagination();
</script>
<style type="text/css">
#myInput {
background-image: url('/css/searchicon.png'); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
#myTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 18px; /* Increase font-size */
}
#myTable th, #myTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
</style>
<svg hidden="">
<symbol id="svg-icon-chevron-light-left" viewBox="0 0 24 32">
<path d="M28.176 1.327c-0.468-0.468-1.249-0.468-1.717 0l-14.049 14.049c-0.234 0.234-0.39 0.546-0.39 0.859s0.156 0.624 0.39 0.859l13.581 13.581c0.234 0.234 0.546 0.39 0.859 0.39s0.624-0.156 0.859-0.39c0.468-0.468 0.468-1.249 0-1.717l-12.722-12.722 13.19-13.19c0.468-0.468 0.468-1.249 0-1.717z"></path>
</symbol>
<symbol id="svg-icon-chevron-light-right" viewBox="0 0 24 32">
<path d="M12.41 1.327c0.468-0.468 1.249-0.468 1.717 0l14.049 14.049c0.234 0.234 0.39 0.546 0.39 0.859s-0.156 0.624-0.39 0.859l-13.581 13.581c-0.234 0.234-0.546 0.39-0.859 0.39s-0.624-0.156-0.859-0.39c-0.468-0.468-0.468-1.249 0-1.717l12.722-12.722-13.19-13.19c-0.468-0.468-0.468-1.249 0-1.717z"></path>
</symbol>
</svg>
</head>
<body>
<input type="text" id="myInput" onkeyup="changeFilter()" placeholder="Search for names..">
<table id="myTable" border='1'>
<tr class='header'>
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>
<nav class="pagination pagination--ajax" aria-labelledby="pagination_heading" role="navigation">
<span aria-live="polite" role="status">
<h2 id="pagination_heading" class="clipped">Results Pagination - Page <span class="pagination__index">1</span></h2>
</span>
<a aria-disabled="true" class="pagination__previous">
<svg aria-labelledby="pagination-previous-title" role="img">
<title id="pagination-previous-title">Previous Page</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-chevron-light-left"></use>
</svg>
</a>
<ol class="pagination__list">
<li><a class="pagination__item">-1</a></li>
<li><a class="pagination__item">0</a></li>
<li><a class="pagination__item" aria-current="page">1</a></li>
<li><a class="pagination__item">2</a></li>
<li><a class="pagination__item">3</a></li>
</ol>
<a class="pagination__next" aria-disabled="false">
<svg aria-labelledby="pagination-next-title" role="img">
<title id="pagination-next-title">Next Page</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-chevron-light-right"></use>
</svg>
</a>
<span id='paginationLabel'></span>
</nav>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment