在同一页上使用js函数两次
Use js function twice on same page
我使用这个javascript在两个div之间对内容进行分页。分页效果很好。但是,如果我在同一页上使用该函数两次,则只显示一个分页。我试图重命名这些函数,但无济于事。我知道这可能是一个基本问题,但我自己没有找到解决方案。。。任何帮助都是值得的。
$(document).ready(function(){
var show_per_page = <?php echo json_encode($itemspp); ?>;
var number_of_items = $('#content').children().size();
var number_of_pages = Math.ceil(number_of_items/show_per_page);
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
var navigation_html = '<a class="previous_link" href="javascript:previous();">Vorige</a>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a class="next_link" href="javascript:next();">Volgende</a>';
$('#page_navigation').html(navigation_html);
$('#page_navigation .page_link:first').addClass('active_page');
$('#content').children().css('display', 'none');
$('#content').children().slice(0, show_per_page).css('display', 'block');
});
function previous(){
new_page = parseInt($('#current_page').val()) - 1;
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}
}
function next(){
new_page = parseInt($('#current_page').val()) + 1;
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}
}
function go_to_page(page_num){
var show_per_page = parseInt($('#show_per_page').val());
start_from = page_num * show_per_page;
end_on = start_from + show_per_page;
$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
$('#current_page').val(page_num);
}
假设您已经尝试使用具有相同id"page_navigation"的两个元素,则不能这样做,因为每个id都必须是唯一的。
您所需要做的就是为每个页面导航元素创建一个不同的id,比如"page_navigation_1"和"page_navigation_2"。然后你只需要像这样修改你的代码:
$('#page_navigation_1').html(navigation_html);
$('#page_navigation_1 .page_link:first').addClass('active_page');
$('#page_navigation_2').html(navigation_html);
$('#page_navigation_2 .page_link:first').addClass('active_page');
但是,可能是因为页面内容太短(例如,只有一行项目),所以必须有两个页面导航元素看起来不太好。在这种情况下,您不能简单地设置其中一个或另一个。
编辑:如果你有很多项目要显示,那么在服务器端执行分页逻辑可能会更高效,因为实际上,你似乎在每个页面上发送所有的项目。
相关文章:
- Meteor Router数据函数被调用两次
- Append元素在运行两次函数后不显示
- 为什么我们要在语句中两次将函数括在括号中
- 调用一个函数两次
- java-script 函数被调用两次
- Ajax Post-Submit函数提交两次
- 在一个页面中包含两次的脚本中调用函数
- 我必须点击两次才能使用jQuery激活函数
- 为什么这个函数执行了两次
- isHidden函数要求我在应用响应显示时单击两次
- 调用随机函数Javascript,但不能两次调用相同的函数
- jQuery停止函数运行两次
- JS函数只需点击一次即可触发两次
- 在一个页面中使用相同的javascript函数两次
- matchMedia调用函数两次
- JS函数中的一个点击按钮被调用了两次
- jQuery移除两次函数调用
- 在JS中定义两次函数.根据网页指示要使用的定义
- 防止在两个触发事件中执行两次函数
- AngularJS需要执行两次函数才能显示结果