php - Pagin javascript - Udvikleren.dk - Programmering, webdesign og grafik

Tags: php javascript

Bruger #17554 @ 22.11.13 01:14

Hej,

Søger hjælp til pagin med php.
Hvor den viser 5 "blogs IDër" pr. side. .

Hvordan og hvorledes ville i gøre det. ?

---

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="jPaginate - jQuery Pagination Plugin" />
        <meta name="keywords" content="jquery, plugin, pagination, fancy" />
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
        <style>
            .header{
                position:absolute;
                top:0px;
                left:0px;
                width:100%;
                height:80px;            
            }
            .header h1{
                color:#fff;
                font-size: 38px;
                margin:0px 0px 0px 30px;
                font-weight:100;
                line-height:80px;
                padding:0px;
            }
            .footer{
                width:100%;
                margin:10px 0px 5px 0px;
            }
            a img{
                border:none;
                outline:none;
            }
            .content{
                margin-top:100px;
                padding:0px;
                bottom:0px;
            }
            .about{
                width:100%;
                height:400px;
                background:transparent url(about.png) repeat-x top left;
                border-top:2px solid #ccc;
                border-bottom:2px solid #000;
            }
            .about .text{
                width:16%;
                margin:5px 2% 10px 2%;
                height:380px;
                float:left;
                color:#FCFEF3;
                font-size: 16px;
                text-align:justify;
                letter-spacing:0px;
            }
            .about .text h1{
                border-bottom: 1px dashed #ccc;
                color:#fff;
            }
            .demo{
                width:580px;
                padding:10px;
                margin:10px auto;
                border: 1px solid #fff;
                background-color:#f7f7f7;
            }
            h1{
                color:#404347;
                margin:5px 30px 20px 0px;
                font-weight:100;
            }
			.pagedemo{
				border: 1px solid #CCC;
				width:310px;
				margin:2px;
                padding:50px 10px;
                text-align:center;
				background-color:white;	
			}
        </style>
    </head>
    <body>

     
			<div id="paginationdemo" class="demo">
                <div id="p1" class="pagedemo _current" style="">Page 1</div>
				<div id="p2" class="pagedemo" style="display:none;">Page 2</div>
				<div id="p3" class="pagedemo" style="display:none;">Page 3</div>
				<div id="p4" class="pagedemo" style="display:none;">Page 4</div>
				<div id="p5" class="pagedemo" style="display:none;">Page 5</div>
				<div id="p6" class="pagedemo" style="display:none;">Page 6</div>
				<div id="p7" class="pagedemo" style="display:none;">Page 7</div>
				<div id="p8" class="pagedemo" style="display:none;">Page 8</div>
				<div id="p9" class="pagedemo" style="display:none;">Page 9</div>
				<div id="p10" class="pagedemo" style="display:none;">Page 10</div>
				<div id="pagin">                   
                </div>
            </div>
   
		<script type="text/javascript" src="jquery-1.3.2.js"></script>
		<script src="jquery.paginate.js" type="text/javascript"></script>
		<script type="text/javascript">
		$(function() {
			$("#pagin").paginate({
				count 		: 10,
				start 		: 1,
				display     : 3,
				border					: true,
				border_color			: '#fff',
				text_color  			: '#fff',
				background_color    	: 'black',	
				border_hover_color		: '#ccc',
				text_hover_color  		: '#000',
				background_hover_color	: '#fff', 
				images					: false,
				mouse					: 'press',
				onChange     			: function(page){
											$('._current','#paginationdemo').removeClass('_current').hide();
											$('#p'+page).addClass('_current').show();
										  }
			});
		});
		</script>
	</body>
</html>

9 svar postet i denne tråd vises herunder
5 indlæg har modtaget i alt 10 karma

Sorter efter stemmer Sorter efter dato

Bruger #17260 @ 22.11.13 03:08

108

Først og fremmest bør du gå ud efter et sat page_id

Er dette enten ikke sat, 1 eller 0, så skal du have en værdi der starter på 1

Er det over 1, så skal dette ganges op med 5, og derefter minuses med 5, for at holde en logisk værdi

Ergo

PHP kode

 // Vi definerer lige samtidigt en variabel der holder på sidetallet.
 $page = is_int($_GET['page_id']) && $_GET['page_id'] > 1 ? $_GET['page_id'] : 1;
 $offset = $page > 1 ? $page * 5 - 5 : 0;

Derefter skal du så selecte og sætte en limit på dit offset, plus fem ekstra rækker

PHP kode

 // Jeg fraråder brugen af mysql API'et - dette er deprecated, og snart fjernet fra PHP. Benyt enten MySQLi eller PDO
 $query = mysql_query("SELECT * FROM `blog` ORDER BY `id` DESC LIMIT " . $offset . ", 5");

Der har du dit resultset - hvis ikke page_id er sat, ikke er af numerisk værdi, eller ikke er højere end 1, vil $offset være 0 (computere tæller som standard fra 0, ergo er dette 1, 2 = 1, 3 = 2. Dette er dog et helt andet emne, google det istedet). Hvis det er højere end 1, vil $offset ganges op med 5 og minuses med 5, så 2 = 5, 3 = 10, 4 = 15, 5 = 20.
Foruden dette, vil MySQL's LIMIT også hente de næste 5 forekomster (dette tal er menneskeligt at forstå. Det kan ikke blive simplere end at det reelt er de næste 5 resultater) - LIMITS stopper også eksekveringen af en query, når disse fem resultater er fundet, så det vil nedsætte ressourceforbruget.

Der fra kan vi så printe vores fem indlæg ud, vha. en løkke.

PHP kode

 while($row = mysql_fetch_array($query)) {
     echo $title    . PHP_EOL;
     echo $post    . PHP_EOL;
     echo $author    . PHP_EOL;
     echo $date    . PHP_EOL;
     echo "<hr />";
 }

Vi printer her de forskellige værdier ud, i en løkke af fem - dette burde være basal viden. Løkken stopper når $row returnerer FALSE, ergo når der ikke er flere rækker tilbage fra vores resultset.

Vi kan så hurtigt tælle hvor mange post's vi har i vores tabel, evt. med

PHP kode

 // Igen fraråder jeg brugen af mysql API'et. MySQLi og PDO har tilsvarende funktioner
 $countQuery = mysql_query("SELECT `id` FROM `blog`");
 $postSum = mysql_num_rows($countQuery);

Her har vi blot en sum af alle vores posts - denne skal vi kort bruge til at udregne hvor mange sider vi skal have.

Simpelt regnestykke udregner dette

PHP kode

 // Vi runder lige op til næste heltal, for at få reelle sider
 $pages = ceil($postSum / 5);

Vi kan så starte ud med at få smækket et "første side-link" og et "en side tilbage-link" ind, med følgende

PHP kode

 if($page > 1) {
    $prev = $page - 1;
    echo "<a href='?page_id=1'>&laquo;</a> ";
    echo "<a href='?page_id=" . $prev . "'>&lsaquo;</a> ";
 }

Denne siger lidt sig selv - disse skal ikke vises, hvis vi er på første side.

Vi smækker så sidenumre ind

PHP kode

 // Denne indikerer hvor mange tal der skal vises på hver side af nuværende side
 $range = 3; 
 
 for($x = $page - $range; $x <= $page + $range; $x++) {
    if($x > 0 && $x <= $pages) {
       if ($x == $page) {
          echo "[<b>" . $x . "</b>] ";
       } else {
          echo "<a href='?page_id=" . $x . "'>" . $x . "</a> ";
       }
    } 
 }

Dette stykke handler simpelt om at der kun skal vises positive numre, samt ikke flere sider end der findes. Den starter med at sætte en midlertidig variabel, der holder en værdi af den nuværende side minus vores range. Dette loop, kører ind til denne værdi er vores nuværende side plus vores range (ergo vil der som scriptet ser ud nu, blive vist maksimalt 7 sider. Hver gang loopet har kørt en omgang, vil vores midlertidige variabel stige med en. Den vil kun spytte et tal (omkranset af [ og ]) ud på siden, hvis dette er større end 0, samt ikke overgår summen af vores sider

Vi skal også have samme effekt, med næste side, samt sidste side på den anden side, så lad os da få dette smækket på.

PHP kode

 if($page != $pages) {
    $next = $page + 1;
    echo "<a href='?page_id=" . $next . "'>&rsaquo;</a> ";
    echo "<a href='?page_id=" . $pages . "'>&raquo;</a> ";
 }

Dette burde give sig selv, eftersom det egentlig er nogenlunde samme kode som tidligere.

Dette indlæg burde gerne give en idé om hvordan man kan vise flere blog-indlæg på en side, og samtidigt tilknytte en pagination.

Det fulde script kan ses i følgende kodeboks.

PHP kode

 <?php
 
 // Vi definerer lige samtidigt en variabel der holder på sidetallet.
 $page = is_int($_GET['page_id']) && $_GET['page_id'] > 1 ? $_GET['page_id'] : 1;
 $offset = $page > 1 ? $page * 5 - 5 : 0;
 
 // Jeg fraråder brugen af mysql API'et - dette er deprecated, og snart fjernet fra PHP. Benyt enten MySQLi eller PDO
 $query = mysql_query("SELECT * FROM `blog` ORDER BY `id` DESC LIMIT " . $offset . ", 5");
 
 while($row = mysql_fetch_array($query)) {
     echo $title        . PHP_EOL;
     echo $post        . PHP_EOL;
     echo $author    . PHP_EOL;
     echo $date        . PHP_EOL;
     echo "<hr />";
 }
 
 // Igen fraråder jeg brugen af mysql API'et. MySQLi og PDO har tilsvarende funktioner
 $countQuery = mysql_query("SELECT `id` FROM `blog`");
 $postSum = mysql_num_rows($countQuery);
 
 // Vi runder lige op til næste heltal, for at få reelle sider
 $pages = ceil($postSum / 5);
 
 if($page > 1) {
    $prev = $page - 1;
    echo "<a href='?page_id=1'>&laquo;</a> ";
    echo "<a href='?page_id=" . $prev . "'>&lsaquo;</a> ";
 }
 
 // Denne indikerer hvor mange tal der skal vises på hver side af nuværende side
 $range = 3; 
 
 for($x = $page - $range; $x <= $page + $range; $x++) {
    if($x > 0 && $x <= $pages) {
       if ($x == $page) {
          echo "[<b>" . $x . "</b>] ";
       } else {
          echo "<a href='?page_id=" . $x . "'>" . $x . "</a> ";
       }
    } 
 }
 
 if($page != $pages) {
    $next = $page + 1;
    echo "<a href='?page_id=" . $next . "'>&rsaquo;</a> ";
    echo "<a href='?page_id=" . $pages . "'>&raquo;</a> ";
 }
 
 ?>

OBS: dette er utestet, men burde gerne fungere (med tilsvarende tabel). I tilfælde af at det ikke gør, giver det i hvert fald en idé om hvordan det bør sættes op.

Indlæg senest redigeret d. 22.11.2013 03:10 af Bruger #17260

Bruger #17260 @ 22.11.13 01:38

108

Jeg er ikke helt sikker på at jeg forstår problemstillingen her. Kan du uddybe yderligere?

Bruger #17260 @ 22.11.13 01:44

108

Så ergo vil du have fem blog-indlæg pr. side, samt en pagination? Bruger du et CMS eller hvorledes?

Bruger #17260 @ 22.11.13 01:55

108

Hvordan henter du så dit indlæg ud?

Bruger #17260 @ 22.11.13 12:52

108

Oh.. Forfærdeligt langt indlæg at skrive i vildrede..

Lav noget AJAX implementering i samme art, og på den måde hent content fra PHP og load det så ind på siden.

Bruger #17554 @ 22.11.13 01:39

Meningen er at i stedet for at lave page-skift i php.
Vil jeg gerne have det som javascript, men hvor den dog viser op til 5 blogs pr. side. Og skift ved at klikke på nyt side nr, eller last.

Men spørgsmålet er hvordan jeg får php ind i det, og hvordan jeg får den til at vise op til 5, og ikke kun 1. pr. side.

Indlæg senest redigeret d. 22.11.2013 01:40 af Bruger #17554

Bruger #17554 @ 22.11.13 01:46

Ja nemlig.

Nej, bruger intet CMS.

Kode:

PHP kode

 $blog = "australien_blog";
     $sql = mysql_query("SELECT * FROM `".$blog."` ORDER BY blogID DESC");

Bruger #17554 @ 22.11.13 01:57

PHP kode

 $seblog = "australien_blog";
     $sql = mysql_query("SELECT * FROM `".$seblog."` WHERE `blogID` = '".$_GET['blogID']."' AND `linkid` = '".$_GET['linkid']."'");
     if ( ! mysql_num_rows ( $sql ) ) { echo ("Kunne ikke finde bloggen med blog ID samt linkid !"); }
     $visb = mysql_fetch_array($sql);

Bruger #17554 @ 22.11.13 12:45

Det ikke så meget det med at lave pagin i kun php.
Men det mit spørgsmål gik ud på, var i det kode jeg sendte i topics.

Det er det samme som er på linket her --> Link

Vil blot have php ind i det, så jeg kan bruge den funktion på siden der, til at skifte side.

Pagin javascript

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler