Question

在javascript中，我有一个项目列表，有些项目属于类别1，另一些属于类别2。我们有一个过滤器来显示类别1的项目和类别2的项目。

我们有上一个和下一个按钮可在项目之间导航。很好！

因此，我想在分页中显示数字1、2、3 ...以进行导航。这些数字在上一个和下一个按钮之间。有人有主意吗？

JSFiddle上的演示：http://jsfiddle.net/vU9Hv/13/

        var visible = "";
    
    $('div.filter').delegate('a', 'click', function (event) {
      visible = '.' + this.href.slice(this.href.indexOf("#") + 1);
        pagination();
      event.preventDefault();
    });
    
    var itemsNumber = 4;
    var min = 0;
    var max = itemsNumber;
    
    function pagination(action) {
    
        var totalItems = $("li" + visible).length;
    
        $('#next').show();
        $('#prev').show();
    
        if (max < totalItems) {//Stop action if max reaches more than total items 
            if (action == "next") {
                min = min + itemsNumber;
                max = max + itemsNumber;
            }
        }
    
        if (min > 0) {//Stop action if min reaches less than 0
            if (action == "prev") {
                min = min - itemsNumber;
                max = max - itemsNumber;
            }
        }

        if (max >= totalItems)
            $('#next').hide();        
    
        if (min <= 0)
           $('#prev').hide();
    
        $("li").hide();
        $("li" + visible).slice(min, max).show();
    }
    
    pagination();
    
    //Next
    $("#next").click(function() {
        action = "next";
        pagination(action);
    })
    
    //Previous
    $("#prev").click(function() {
        action = "prev";
        pagination(action);
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <div class="filter">
        <a href="#category-1">category 1</a>
        <a href="#category-2">category 2</a>
    </div>
    
    <div id="item-wrapper">
    <ul class="items">
        <li class="category-1">item 1</li>
        <li class="category-1">item 2</li>
        <li class="category-1">item 3</li>
        <li class="category-1">item 4</li>
        <li class="category-1">item 5</li>
        <li class="category-1">item 6</li>
        <li class="category-2">item 7</li>
        <li class="category-2">item 8</li>
        <li class="category-2">item 9</li>
        <li class="category-2">item 10</li>
        <li class="category-2">item 11</li>
        <li class="category-2">item 12</li>
        <li class="category-1">item 13</li>
        <li class="category-1">item 14</li>
        <li class="category-2">item 15</li>
    </ul>
    
    <div class="ctrl-nav">
    <a href="#" id="prev">Previous</a><a href="#" id="next">Next</a>
    </div>
    </div>

Answer 1

据我了解，您需要在链接之间进行分页，这是我要获得的目标的方法：

   var itemsNumber = 4, $items, pages = 1, current = 1;
function makePages(){
	$items = $("ul.items li:visible");
	pages = Math.ceil($items.length / itemsNumber);
	$("#pages").empty();
	for(var p=1;p<=pages;p++){
		$("#pages").append($('<a href="#">'+p+'</a>'));
	}
	showPage(1);
}
function showPage(page){
	$items.hide().slice((page - 1) * itemsNumber, page * itemsNumber).show();
	current = page;
}
makePages();
$("div.ctrl-nav").on('click', 'a', function(){
	var action = $(this).text();
	if(action == 'Previous'){
		current--;
	}else if(action == 'Next'){
		current++;
	}else if(+action > 0){
		current = +action;
	}
	if(current <= 1){
		current = 1;
	}else if(current >= pages){
		current = pages;
	}
	showPage(current);
});
$('div.filter').on('click', 'a', function(){
	var selector = $(this).attr('href').replace("#",".");
	$("ul.items li").show().not(selector).hide();
	makePages();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <div class="filter">
        <a href="#category-1">category 1</a>
        <a href="#category-2">category 2</a>
    </div>
    
    <div id="item-wrapper">
    <ul class="items">
        <li class="category-1">item 1</li>
        <li class="category-1">item 2</li>
        <li class="category-1">item 3</li>
        <li class="category-1">item 4</li>
        <li class="category-1">item 5</li>
        <li class="category-1">item 6</li>
        <li class="category-2">item 7</li>
        <li class="category-2">item 8</li>
        <li class="category-2">item 9</li>
        <li class="category-2">item 10</li>
        <li class="category-2">item 11</li>
        <li class="category-2">item 12</li>
        <li class="category-1">item 13</li>
        <li class="category-1">item 14</li>
        <li class="category-2">item 15</li>
    </ul>
    
    <div class="ctrl-nav">
    <a href="#">Previous</a><span id="pages"></span><a href="#">Next</a>
    </div>
    </div>

JSFiddle

Answer 2

我认为实现此目的的最简单方法是拥有一个变量，该变量可以跟踪您所在的页面并在每次调用pagination()时对其进行更新。

因此，当操作为“ next”时，将一个变量添加到变量中；而当操作为“ prev”时，则将其删除一个变量。

您可以在“下一个”和“上一个”按钮之间添加一个新元素，并在每次调用“ pagination（）”时将文本更新到当前页面。

使用类别过滤器添加数字分页-javascript

2 个答案: