ページネーションはjqueryの

私はdiv要素のセットを含むdiv要素を持っています。 2つのdivの改ページをレンダリングした後のdiv 2残りのdiv要素の後ページネーションはjqueryの

<div id="parent"> 
    <div id="1"></div> 
    <div id="2"></div> 
    <div id="3"></div> 
<div>

は、改ページに行くべき...そこのdivに改ページを胸が張り裂けるための任意のjQueryプラグインneeded.Isです。

出典

2011-08-10 Bhaskar

はい、すばやいGoogle検索で私をもたらしましたthis.おそらくそこを見ているのが一番素敵な見出しです。これを処理するプラグインがある

出典

2011-08-10 12:33:22 Phil

：

あなたはより多くの助けが必要な場合は必要特にあなたがしようとしたご意見をお聞かせくださいまたは

出典

2011-08-10 12:33:27 JMax

方法https://github.com/gbirke/jquery_pagination#readmeの使用に関するとコールバック関数では、divを非表示にして表示しますか？！？！

出典

2011-08-10 12:33:47

非常に簡単な解決策：

使用この簡単なプラグインhttps://github.com/ahmedhijazi94/HZpagination.js

DEMO：

$(document).ready(function(){ 
 

 
    var HZperPage = 2,//number of results per page 
 
    HZwrapper = 'paginationTable',//wrapper class 
 
    HZlines = 'tableItem';//items class 
 
    HZpaginationId ='pagination-container',//id of pagination container 
 
    HZpaginationArrowsClass = 'paginacaoCursor',//set the class of pagi 
 
    HZpaginationColorDefault = '#880e4f',//default color for the pagination numbers 
 
    HZpaginationColorActive = '#311b92', //color when page is clicked 
 
    HZpaginationCustomClass = 'customPagination'; //custom class for styling the pagination (css) 
 
    
 

 
    /*-------------------------F/ AHMED HIJAZI -------------------------*/ 
 
    /*------------------------- HOPE YOU LIKE -------------------------*/ 
 

 

 
    function paginationShow(){if($("#"+HZpaginationId).children().length>8){var a=$(".activePagination").attr("data-valor");if(a>=4){var i=parseInt(a)-3,o=parseInt(a)+2;$(".paginacaoValor").hide(),exibir2=$(".paginacaoValor").slice(i,o).show()}else $(".paginacaoValor").hide(),exibir2=$(".paginacaoValor").slice(0,5).show()}}paginationShow(),$("#beforePagination").hide(),$("."+HZlines).hide();for(var tamanhotabela=$("."+HZwrapper).children().length,porPagina=HZperPage,paginas=Math.ceil(tamanhotabela/porPagina),i=1;i<=paginas;)$("#"+HZpaginationId).append("<p class='paginacaoValor "+HZpaginationCustomClass+"' data-valor="+i+">"+i+"</p>"),i++,$(".paginacaoValor").hide(),exibir2=$(".paginacaoValor").slice(0,5).show();$(".paginacaoValor:eq(0)").css("background",""+HZpaginationColorActive).addClass("activePagination");var exibir=$("."+HZlines).slice(0,porPagina).show();$(".paginacaoValor").on("click",function(){$(".paginacaoValor").css("background",""+HZpaginationColorDefault).removeClass("activePagination"),$(this).css("background",""+HZpaginationColorActive).addClass("activePagination");var a=$(this).attr("data-valor"),i=a*porPagina,o=i-porPagina;$("."+HZlines).hide(),exibir=$("."+HZlines).slice(o,i).show(),"1"===a?$("#beforePagination").hide():$("#beforePagination").show(),a===""+$(".paginacaoValor:last").attr("data-valor")?$("#afterPagination").hide():$("#afterPagination").show(),paginationShow()}),$(".paginacaoValor").last().after($("#afterPagination")),$("#beforePagination").on("click",function(){var a=$(".activePagination").attr("data-valor"),i=parseInt(a)-1;$("[data-valor="+i+"]").click(),paginationShow()}),$("#afterPagination").on("click",function(){var a=$(".activePagination").attr("data-valor"),i=parseInt(a)+1;$("[data-valor="+i+"]").click(),paginationShow()}),$(".paginacaoValor").css("float","left"),$("."+HZpaginationArrowsClass).css("float","left"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>HZpagination</title> 
 
\t <style type="text/css"> 
 
\t \t .customPagination, .paginacaoCursor{ 
 
\t \t \t margin: 5px; 
 
\t \t \t padding: 5px 8px; 
 
\t \t \t color: #fff; 
 
\t \t \t background: #880e4f; 
 
\t \t \t cursor: pointer; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 

 

 
\t <ul class="paginationTable"> 
 
       <li class="tableItem"> 1 </li> 
 
       <li class="tableItem"> 2 </li> 
 
       <li class="tableItem"> 3 </li> 
 
       <li class="tableItem"> 4 </li> 
 
       <li class="tableItem"> 5 </li> 
 
       <li class="tableItem"> 6 </li> 
 
       <li class="tableItem"> 7 </li> 
 
       <li class="tableItem"> 8 </li> 
 
       <li class="tableItem"> 9 </li> 
 
       <li class="tableItem"> 10 </li> 
 
       <li class="tableItem"> 11 </li> 
 
       <li class="tableItem"> 12 </li> 
 
       <li class="tableItem"> 13 </li> 
 
       <li class="tableItem"> 14 </li> 
 
       <li class="tableItem"> 15 </li> 
 
      </ul> 
 
      <div id="pagination-container"> 
 
      <p class='paginacaoCursor' id="beforePagination"> < </p> 
 
      <p class='paginacaoCursor' id="afterPagination"> > </p> 
 
      </div> 
 

 

 
\t <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 
 
\t <script type="text/javascript" src="HZpagination.js"></script> 
 

 
</body> 
 
</html>

出典

2018-02-06 14:50:25

ページネーションはjqueryの

答えて

関連する問題