Question

我有一个包含一组div的div。在渲染两个div之后需要分页。是否有任何jquery插件用于在div中重新分页...

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

在div 2之后剩余的div应该进行分页。

4 个答案:

答案 0 :(得分：1)

答案 1 :(得分：0)

答案 2 :(得分：0)

答案 3 :(得分：0)

Answer 1

一个非常简单的解决方案：

使用这个简单的插件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>
	<title>HZpagination</title>
	<style type="text/css">
		.customPagination, .paginacaoCursor{
			margin: 5px;
			padding: 5px 8px;
			color: #fff;
			background: #880e4f;
			cursor: pointer;
		}
	</style>
</head>
<body>


	<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>


	<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	<script type="text/javascript" src="HZpagination.js"></script>

</body>
</html>

Answer 2

是的，快速谷歌搜索带给我this.这可能是那里最好看的分页。

Answer 3

有插件可以解决这个问题：

如果您需要更多帮助，请告诉我们您尝试或特别需要的内容

Answer 4

如何使用https://github.com/gbirke/jquery_pagination#readme并在回调函数中隐藏并显示你的div？！？！

分页jquery

4 个答案: