Menu
I use jquery pagination plugin for paging... If there is one pagination plugin there is no problem for me... But if there is two one seems to work but the other doesn't seem too... Here is my code,
<div id="PagerUp" class="pager">
</div><br /><br /><br />
<div id="ResultsDiv">
</div>
<div id="PagerDown" class="pager">
</div>
And my jquery has,
<script type="text/javascript">
var itemsPerPage = 5;
$(document).ready(function() {
getRecordspage(0, itemsPerPage);
var maxvalues = $("#HfId").val();
$(".pager").pagination(maxvalues, {
callback: getRecordspage,
current_page: 0,
items_per_page: itemsPerPage,
num_display_entries: 5,
next_text: 'Next',
prev_text: 'Prev',
num_edge_entries: 1
});
});
</script>
Here is what i am getting...
alt text http://img52.imageshack.us/img52/5618/pagerse.jpg
Both works but Look at the pagerup the selected page is 3 but the PagerDown shows 1.... How to change one pager on other pagers callback event in jquery....
EDIT: using mef's idea doesn't seem to work...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="Stylesheet" type="text/css" href="CSS/Main.css" />
<script type="text/javascript" src="Javascript/jquery.pagination.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".pager").pagination(300, { callback: pagecallback,
current_page: 0,
items_per_page: 5,
num_display_entries: 5,
next_text: 'Next',
prev_text: 'Prev',
num_edge_entries: 1
});
});
function pagecallback() {
var paginationClone = $("#Pagination > *").clone(true);
$("#Pagination2").empty();
paginationClone.appendTo("#Pagination2");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="pager" id="pagination">
<!-- the container for your first pagination area -->
</div>
<div id="results">
<!-- the container where you show your results -->
</div>
<div class="pager" id="Pagination2">
<!-- the container for your second pagination area -->
</div>
</div>
</form>
</body>
</html>
450
In more simpler words, it’s when you break a big piece of digital information into smaller bits of pages. Now the easiest way to get pagination in your website is by using jQuery pagination plugins on your website. The main purpose of using these pagination jQuery plugins is to arrange a huge amount of content by dividing it into several pages.
A LightWeight jQuery plugin that allows you to browse easily through the list of items with pagination controls. The jQuery Paging plugin aims to be simple as possible by a native callback design, which in turn allows to design a pagination navigation in almost every feasible variation.
It is one of the simplest and yet effective pagination plugins. TWBS allows you to add the enable or disable buttons in action. You can add alternative styles of showcasing the pagination with start and end page numbers. It also provides .zip file and .tar.gz file for downloading this easily in these file formats.
Vue.js Paginator is a powerful plugin and holds a lot for you. It comes with well-managed documentation, which will help you in future to resolve your queries. This plugin is built for production with minification. So, you can use it, if it matches your site’s requirement and personal preferences.
Since this doesn't seem to be officially supported, here is a workaround (working demo).
Step 1 Create your HTML markup as follows:
<div class="pagination" id="Pagination">
<!-- the container for your first pagination area -->
</div>
<div id="results">
<!-- the container where you show your results -->
</div>
<div class="pagination" id="Pagination2">
<!-- the container for your second pagination area -->
</div>
Step 2 The idea:
The idea is now to use the pagination plugin as usual with the first pagination div. But additionally, we want to copy all contents of the first pagination div to the second pagination div every time a page change occurs.
Step 3 Tweak the pageSelect-callback:
Add the following lines at the end of your callback function:
var paginationClone = $("#Pagination > *").clone(true);
$("#Pagination2").empty();
paginationClone.appendTo("#Pagination2");
It is very important to include the boolean parameter (withDataAndEvents) with the .clone call, otherwise the copy of your pagination won't have any click events.
Now, every time you click on a pagination element (regardless if it is the original or the copy), the page will change and the pagination elements will update accordingly.
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
