如何编程bootstrap-3分页以使用简单的HTML内容 [英] How do I program bootstrap-3 pagination to work with simple HTML content

查看：71
本文介绍了如何编程bootstrap-3分页以使用简单的HTML内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



分页HTML：



 < nav class =text-center> 
< ul class =pagination> 
< li class =pag_prev> 
 < span aria-hidden =true>& laquo;< / span> 
< / a> 
< / li> 
< li id =pag_1>< a href =＃> 1< / a>< / li> 
< li>< a href =＃> 2< / a>< / li> 
< li>< a href =＃> 3< / a>< / li> 
< li>< a href =＃> 4< / a>< / li> 
< li>< a href =＃> 5< / a>< / li> 
< li class =pag_next> 
< a href =＃aria-label =下一个> 
< span aria-hidden =true>& raquo;< / span> 
< / a> 
< / li> 
 
< / ul> 
< / nav>

JQuery： 

 < code $（document）.ready（function（）{
 $（＃pag_1）。addClass（active）; 
}）; 
 
 pageSize = 1; 
 var i = 1; 
 
 showPage = function（page）{
 $（。content）。hide（）; 
 $（。content）。each（function（n）{
 if（n> = pageSize *（page  -  1）&& n< pageSize * page）
 $（this）.show（）; 
}）; 
} 
 
 showPage（i）; 
 
 
 $（＃pagin li.numeros）。click（function（）{
 $（＃pagin li）。removeClass（active）; 
 $（this）.addClass（active）; 
i = parseInt（$（this）.text（））; 
 showPage（i）; 
}）; 
 
 $（＃pagin li.pag_prev）。click（function（）{
 $（＃pagin li）。removeClass（active）; 
 $ （this）.addClass（active）; 
i = i  -  1; 
 showPage（i）; 
}）; 
 
 $（＃pagin li.pag_next）。click（function（）{
 $（＃pagin li）。removeClass（active）; 
 $ （this）.addClass（active）; 
i = i + 1; 
 showPage（i）; 
}）;

我现在有5条消息，所以我将每页的消息设置为1（ pageSize = 1; ），所以我可以有5个页面进行导航并确保它能正常工作。 我的问题是：


  1. 当我用箭头浏览页面（不是数字）时，数字不会得到活动 class，我无法想象如何创建它。

  2. 我显示5页，但是您可以导航到无限前后，我不知道如何告诉停止当到达最后一页和第一页时。

  3. 有没有办法自动生成一个新的< li class =numeros>< a href当页面达到新闻设置的数量时（例如 pageSize = 5 <= <＃>>Nº< / a>< / li> / code>）？


解决方案


用箭头浏览页面（不是数字），数字不会得到活动类，并且


您应该先检查哪个number是真实的 active ，然后在下一个数字中添加 active class（如果 pag_next 是点击）或前一个号码（如果点击 pag_prev ）。 

  $（。pagination li.pag_prev）。click（function（）{
 // ... 
 //而不是this（因为this是箭头）：
 // $（this）.addClass（active）; 
 //删除当前数字的活动类并将该类添加到以前的数字：
 $（'。numeros.active'）。removeClass（'active'）。prev（）。addClass（'active ）; 
 
 // ... 
}）; 
 $ b $（。pagination li.pag_next）。click（function（）{
 // ... 
 //而不是this（因为this是箭头）：
 // $（this）.addClass（active）; 
 //删除当前数字的活动类并将该类添加到下一个数字：
 $（'。 （'active'）。next（）。addClass（'active'）; 
 
 // ... 
}）;






页面，但你可以导航到无限前进和后退，我不知道如何告诉停止当到达最后和第一页。


您应该简单地检查第一个或上一个分页编号是否已经有class active ，然后 return （不做任何事），如果其中之一有： 

  $（。分页li.pag_prev）。click（function（）{
 //确保活动分页号不是第一个。
 //我们想在这里返回（什么也不做），如果第一个数字已经有效：
 if（$（this）.next（）。is（'.active'））return; 
 // ... 
 //如果第一个数字继续执行尚未激活：
 currentPage--; 
 showPage（）; 
}）; 
 
 $（。pagination li.pag_next）。click（function（）{
 //确保活动分页号码不是最后一个
 //我们（$（this）.prev（）。is（'。active'））return; 
 // ...如果最后一个数字已经有效，则返回这里（不做任何事）：
 if 
 //如果最后一个数字尚未激活，则继续执行：
 currentPage ++; 
 showPage（）; 
}）;






当页面达到新闻设置的数量时（前页面大小= 5），自动生成新的Nº和相应的带有JS的页面？


是的。

首先，我们需要更多变量：

  //每页新闻：
 var pageSize = 1; 
 //全部新闻（包含内容类的元素计数）：
 var pagesCount = $（。content）。length; 
 //计算总页数：
 var totalPages = Math.ceil（pagesCount / pageSize）; 
 
 //我用currentPage取代了i变量（更多细节请参阅下方）
 var currentPage = 1;

我们已经知道 totalPages 和 pageSize ，所以我们可以基于新闻总量和每页新闻数量动态地创建分页： HTML： 

 < ul class =pagination> 
< li class =pag_prev> 
 < span aria-hidden =true>& laquo;< / span> 
< / a> 
< / li> 
 <！ - 我们的动态分页内容就在这里 - > 
< li class =pag_next> 
< a href =＃aria-label =下一个> 
< span aria-hidden =true>& raquo;< / span> 
< / a> 
< / li> 
< / ul>

JS：

  var nav =''; 
 for（var s = 0; s< totalPages; s ++）{
 nav + ='< li class =numeros>< a href =＃>'+（s 1）+ '< / A>< /立GT;'; 
 
 //在prev按钮之后附加分页号：
 $（。pag_prev）。after（nav）; 
 //将active类添加到第一个分页编号中：
 $（。numeros）。first（）。addClass（active）;





请注意，您的 i 变量在全局范围内设置，所以您不必每次都将它传递给 showPage（）方法，而您可以使用它direclty。

我将这个变量重命名为更多可读的 - currentPage ：

  var currentPage = 1; 
 $ b $ showPage = function（）{
 $（。content）。hide（）。each（function（n）{
 if（n> = pageSize *（当前页面 -  1）&& n< pageSize * currentPage）
 $（this）.show（）; 
}）; 
} 
 
 showPage（）;





JSFiddle


I'm working in a "News" Section, and trying to make a bootstrap 3 pagination work with jquery.

HTML for the pagination:

<nav class="text-center">
    <ul class="pagination">
        <li class="pag_prev">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li id="pag_1"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="pag_next">
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>

    </ul>
</nav>

JQuery:

$( document ).ready(function() { 
    $("#pag_1").addClass("active");
});

pageSize = 1;
var i = 1;

showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });
}

showPage(i);


$("#pagin li.numeros").click(function() {
    $("#pagin li").removeClass("active");
    $(this).addClass("active");
    i = parseInt($(this).text());
    showPage(i);
});

$("#pagin li.pag_prev").click(function() {
    $("#pagin li").removeClass("active");
    $(this).addClass("active");
    i = i - 1;
    showPage(i);
});

$("#pagin li.pag_next").click(function() {
    $("#pagin li").removeClass("active");
    $(this).addClass("active");
    i = i + 1;
    showPage(i);
});

I have 5 news for now, so I set the news per page in 1 (pageSize = 1;) so I can have 5 pages to navigate and make sure its working.

My issues are:

  1. When I navigate the pages with the arrows (not the numbers), the numbers don't get the active class, and I couldnt figurate how to make it.
  2. Im showing 5 pages, but you can navigate to infinite foward and backward, I don't know how to tell to stop when reach the last and the first page.
  3. Is there a way to automatic generate a new <li class="numeros"><a href="#">Nº</a></li> and the respective page with JS when the page reach the amount of news setting (e.x. pageSize = 5)?

解决方案

When I navigate the pages with the arrows (not the numbers), the numbers dont get the "active" class, and I couldnt figurate how to make it.

You should first check which "number" is actualy active, then add active class the next number (if pag_next is clicked) or to the previous number (if pag_prev is clicked).

$(".pagination li.pag_prev").click(function() {
    // ...
    // instead of this (as "this" is the arrow):
    // $(this).addClass("active");
    // remove active class of the current number and add the class to previous number:
    $('.numeros.active').removeClass('active').prev().addClass('active');

    // ...
});

$(".pagination li.pag_next").click(function() {
    // ...
    // instead of this (as "this" is the arrow):
    // $(this).addClass("active");
    // remove active class of the current number and add the class to next number:
    $('.numeros.active').removeClass('active').next().addClass('active');

    // ...
});

Im showing 5 pages, but you can navigate to infinite foward and backward, i don't know how to tell to stop when reach the last and the first page.

You should simply check if the first or last pagination number already has class active, then return (do nothing) if one of them has:

$(".pagination li.pag_prev").click(function() {
    // make sure that the active pagination number is not the first.
    // we want to return here (do nothing) if the first number is already active:
    if($(this).next().is('.active')) return;
    // ...
    // continue executing if the first number isn't yet active:
    currentPage--;
    showPage();
});

$(".pagination li.pag_next").click(function() {
    // make sure that the active pagination number is not the last.
    // we want to return here (do nothing) if the last number is already active:
    if($(this).prev().is('.active')) return;
    // ...
    // continue executing if the last number isn't yet active:
    currentPage++;
    showPage();
});

Is there a way to automatic generate a new Nº and the respective page with JS when the page reach the amount of news setting (e.x. pageSize = 5)?

Yes.

First, we need some more variables:

// news per page:
var pageSize = 1;
// total news (count elements with "content" class):
var pagesCount = $(".content").length;
// calculate total pages:
var totalPages = Math.ceil(pagesCount / pageSize);

// I have replaced "i" variable with "currentPage" (more details at the bottom)
var currentPage = 1;

We already know the totalPages and pageSize, so we can create pagination dynamically based on total amount of news and the number of news per page:

HTML:

<ul class="pagination">
    <li class="pag_prev">
        <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
    </li>
    <!-- our dynamic pagination content goes here -->
    <li class="pag_next">
        <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
</ul>

JS:

var nav = '';
for (var s=0; s<totalPages; s++){
    nav += '<li class="numeros"><a href="#">'+(s+1)+'</a></li>';
}
// append pagination numbers after "prev" button:
$(".pag_prev").after(nav);
// add "active" class to the first pagination number:
$(".numeros").first().addClass("active");

As a side note, your i variable is set in a global scope, so you don't have to pass it every time to the showPage() method and you can use it direclty.
I renamed this variable to something more "readable" - currentPage:

var currentPage = 1;

showPage = function() {
    $(".content").hide().each(function(n) {
        if (n >= pageSize * (currentPage - 1) && n < pageSize * currentPage)
            $(this).show();
    });
}

showPage();

Whole code on JSFiddle

这篇关于如何编程bootstrap-3分页以使用简单的HTML内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆