jQuery分页下一页和上一页按钮在点击零或超过最后一页后失败
jQuery Pagination next and previous buttons fail after hitting zero or past last page
上一页和下一页按钮没有限制,即:可以在第一页和最后一页前后移动。。。似乎无法限制这一点。
我创建了if语句,试图阻止按钮执行,但它不起作用。有什么想法吗?
jsFiddle:https://jsfiddle.net/s7ac8aq3/
$(function() {
$(document).ready(function(){
//amount of items on page
var num = $('.post').length;
//set items per page
var itemsPerPage = 1;
var nav = false;
//array of all items
var items = $(".post");
//rounds up to the nearest whole number -- number of pages needed to display all results
var numOfPages = Math.ceil((num / itemsPerPage));
//container div
var paginationContainer = $("#pagination-container");
//initial link num
var linkNum = 1;
paginationContainer.prepend("<button class='pagination' id='btn-prev' value='prev'>Prev</button>");
//creates all pagination links as input buttons (can be anything... li, a, div, whatever)
for(i = 0; i < numOfPages; i++)
{
paginationContainer.append("<button class='pagination' id='btn-" + (i + 1) +"' " + "value='" + (i + 1) + "'>" + (i + 1) + "</button>");
}
paginationContainer.append("<button class='pagination' id='btn-next' value='next'>Next</button>");
//does the initial filtering of the items, hides anything greater than page 1
items.filter(":gt(" + (itemsPerPage -1) + ")").hide();
//finds the input feilds and executes onclick
paginationContainer.find('button').on('click', function(){
//REQUIRED RESETS NAV BOOL SO CLICKS WILL REGISTER
nav = false;
//stores the value of the link in this var
var val = $(this).val();
//if value is next or prev
if(val == "prev")
{
if(linkNum > 1)
{
nav = true;
linkNum = linkNum - 1;
var currentBtn = paginationContainer.find("#btn-" + linkNum);
var otherButtons = paginationContainer.find('button');
otherButtons.attr('class', "pagination");
currentBtn.attr('class', "current");
currentBtn.focus();
}
}
else if (val == "next")
{
if(linkNum < numOfPages)
{
nav = true;
linkNum = linkNum + 1;
var currentBtn = paginationContainer.find("#btn-" + linkNum);
var otherButtons = paginationContainer.find('button');
otherButtons.attr('class', "pagination");
currentBtn.attr('class', "current");
currentBtn.focus();
}
}
if(nav == false)
{
//reoves the current class from all buttons before reassigning
var otherButtons = paginationContainer.find('button');
linkNum = $(this).val();
otherButtons.attr('class', "pagination");
//assigns current class to current button
$(this).attr("class", "current");
}
//creates an array of items to hide based on if the set results are less than the link num
var itemsToHide = items.filter(":lt(" + ((linkNum-1) * itemsPerPage) + ")");
// adds any items that are greater than the set results from the link num to the hide array
$.merge(itemsToHide, items.filter(":gt(" + ((linkNum * itemsPerPage) -1) + ")"));
// hides the items in hide array
itemsToHide.hide();
//shows all items NOT in the hide array
var itemsToShow = items.not(itemsToHide);
itemsToShow.show();
});
});
});
通过对jsFiddle的一点调试发现了问题。在这部分代码中:
} else if (val == "next") {
if (linkNum < numOfPages) {
nav = true;
linkNum = linkNum + 1;
CCD_ 1的值有时被存储为字符串。因此,添加"3"+1
会在JavaScript中生成"31"
。
琐碎的解决方案是在加法之前将其转换为整数:
linkNum = parseInt(linkNum,10) + 1; // always use a radix
https://jsfiddle.net/mblase75/s7ac8aq3/3/
然而,我更愿意从源头上解决问题,几行下来:
if (nav == false) {
var otherButtons = paginationContainer.find('button');
linkNum = $(this).val();
当您首先存储linkNum
时,.val()
会返回一个字符串。立即将其解析为整数:
linkNum = parseInt($(this).val(),10);
https://jsfiddle.net/mblase75/s7ac8aq3/4/
然后在执行添加之前,您不必更改它。
您在linkNum变量中遇到的问题是,当您单击某个页码时,变量会得到一个字符串值,然后当您尝试添加1时,您会收到一个新的字符串,例如"3"+1=>"31"、"4"+1=>"41"
相关文章:
- 如何获取不属于我项目的上一页的URL
- 如何在Facebook上的iframe应用程序中使后退按钮返回到上一页
- 使用Booklet Jquery插件,我如何验证最后一页是否显示
- 如何在一页网站中使用PHP重定向到一个页面
- Javascript并不是显示在每一页上
- 如何在一页上显示多个Highcharts图表
- jQuery分页下一页和上一页按钮在点击零或超过最后一页后失败
- 如何为AngularJS制作智能表中第一页和最后一页的跳过按钮
- Bootstrap一页导航Fluid网站最小化问题
- 从mysql数据库中删除项目,然后返回最后一页
- 区分剑道网格上一页/下一页点击与转到第一页/最后一页点击事件
- Listjs为筛选后的最后一页生成按钮
- 使用滚动重新加载 Jqgrid 时出现问题 - 重复的行数据并缺少最后一页
- 如何在多页面中制作一个 JavaScript 表单向导,其中包含下一页,并取消并返回并提交最后一页
- 数据表在页面加载时转到最后一页
- 使用pdfmake将文本固定到pdf的最后一页底部
- 如何在Javascript中加载KendoGrid的最后一页
- 更改最后一页URL
- Jquery测验只显示第一页和最后一页
- jQuery DataTable - init后通过JS跳转到最后一页