How to make jquery pagination? [closed]

I have searched how to make dynamic pagination in jquery (ajax); to take data from database in php, but I didn't found a good answer. I know how to do it by php but I need it by jquery because my website use ajax load.

the example I want it like this jquery pagination

So please if anyone have a link for a tutorial... put it here!, Or if you can give a quick explanation put it.

it'd be great if there a plugin to do it in a fast way.

Thanx... :)

回答1:

JQuery pagination plugin: http://plugins.jquery.com/project/pagination

Demo: http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

回答2:

Here is complete solution for ajaxified pagination

<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'];

Below is a jquery plugin to generate pagination links

simplePagination.js

回答3:

USE: 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>
	<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>