同一页面中的两个jQuery分页插件似乎不起作用 [英] Two jquery pagination plugin in the same page doesn't seem to work
问题描述
我使用jquery分页插件进行分页...如果有一个分页插件对我来说没有问题...但是，如果有两个似乎可以工作，但另一个似乎也不行...这是我的代码，
<div id="PagerUp" class="pager">
</div><br /><br /><br />
<div id="ResultsDiv">
</div>
<div id="PagerDown" class="pager">
</div>
我的jquery有，
<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>
这就是我要得到的...
替代文本http://img52.imageshack.us/img52/5618/pagerse .jpg
两者均有效，但查看pagerup所选页面为3，但PagerDown显示1....如何在jquery中的其他传呼机回调事件上更改一个传呼机....
使用MEF的想法似乎无效...
<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>
由于似乎尚未得到正式支持，因此可以采用以下解决方法( 工作演示 ).
第1步 创建您的HTML标记，如下所示:
<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>
第2步:想法:
现在的想法是在第一个分页div上像往常一样使用分页插件 .但是，此外，我们希望每次发生页面更改时都将第一个分页div的所有内容复制到第二个分页div.
步骤3 调整页面选择回调:
在回调函数的末尾添加以下行:
var paginationClone = $("#Pagination > *").clone(true);
$("#Pagination2").empty();
paginationClone.appendTo("#Pagination2");
在.clone调用中包含布尔参数(withDataAndEvents)非常重要，否则分页副本将没有任何单击事件.
现在，每次单击分页元素(无论是原件还是副本)，页面都会更改，并且分页元素也会相应更新.
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>
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.
这篇关于同一页面中的两个jQuery分页插件似乎不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
