Skip to content

Instantly share code, notes, and snippets.

@joshuamabina
Last active June 17, 2020 13:35
Show Gist options
  • Save joshuamabina/fde54ca9e09b12b00bae88f322dd4f35 to your computer and use it in GitHub Desktop.
Save joshuamabina/fde54ca9e09b12b00bae88f322dd4f35 to your computer and use it in GitHub Desktop.
How to link esimakin pagination with my table?
<!---
An attempt to a StackOverflow question
https://stackoverflow.com/questions/44725973/how-to-link-esimakin-pagination-with-my-table#
You'll need to download jquery-twbs-pagination https://esimakin.github.io/twbs-pagination/
-->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="page-content" class="well"></div>
<div id="pagination-demo"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="jquery.twbsPagination.min.js"></script>
<script>
$(document).ready(function() {
var store = [];
function setContent( page ) {
$('#page-content').html(store[page].name);
}
$.getJSON("http://jsonplaceholder.typicode.com/users")
.done(function ( data ) {
store = data;
$('#pagination-demo').twbsPagination({
totalPages: store.length,
visiblePages: 3,
onPageClick: function (event, page) {
setContent(page);
}
});
});
});
</script>
</body>
</html>
@sargamdhamija
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment