如何讓jquery分頁？

Question

我已經搜索瞭如何在jquery（ajax）中進行動態分頁;在php中從數據庫中獲取數據，但我沒有找到一個好的答案。我知道如何做到這一點的PHP，但我需要通過jquery，因爲我的網站使用Ajax負載。

我希望它這樣jquery pagination

的例子所以請，如果任何人有一個鏈接的教程...把它放在這裏！或者，如果你可以給一個快速的解釋把它。

如果有一個插件可以快速完成，它會很棒。

感謝名單... :)

Answer 1

JQuery的分頁插件：http://plugins.jquery.com/project/pagination

演示：http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

Answer 2

這裏是Ajax化分頁完整的解決方案

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     // loading page if page is refreshed or accessed directly from a bookmark 
     load_page(); 

     $(window).bind('hashchange', function() { 
      // loading page on hashchange event that is triggered by a click on pagination link 
      load_page(); 
     }); 

     function load_page(page_number){ 
      var hash = window.location.hash; 
      id = hash.split('-')[1]; 
      if(id > 0){ 
       // replace http://www.example.com/ with your site url 
       $.get("http://www.example.com/page.php", { page_id: id }, function(data){ 
        //updating the div with dynamically loaded data 
        $('#post').html(data); 
       }); 
      } 

     } 
    }); 

</script> 

<div id="post"> 

</div> 

<div class="pagination"> 
    <a href="#page-1">1</a> 
    <a href="#page-2">2</a> 
    <a href="#page-3">3</a> 
</div> 

page.php文件

mysql_connect("your.hostaddress.com", "username", "password") or die(mysql_error()); 
mysql_select_db("Database_Name") or die(mysql_error()); 

$id = (int) $_GET['page_id']; 
$data = mysql_query("SELECT * FROM posts WHERE ID = $id") or die(mysql_error()); 

$post = mysql_fetch_array($data); 
echo $post['post_content']; 

下面是一個jQuery插件生成分頁鏈接

simplePagination.js

Answer 3

用途：https://github.com/ahmedhijazi94/HZpagination.js

$(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>