• Home
  • PHP
  • Form-based paging with PHP and JavaScript

Form-based paging with PHP and JavaScript

If you have a blog or news section on your custom website, which you want to separate by pages, use the steps below to implement a paging module. First, I usually create a file called pager.php in your /includes/ folder. The content of that file is below:

<?php
function paging($pageItems, $total, $pageNum) {
    if($pageItems<$total) {
        $qtyPages=ceil($total/$pageItems);
        ?>
        <div class="page_num_link">
            <ul>
                <?
                for($jj=0;$jj<=2 && $jj<=($qtyPages-1);$jj++) {
                    $arrPages[$jj]=($pageNum+1)+$jj;
                }
                if($pageNum>0) {
                    ?>
                    <li style="padding-right:10px;">
                        <a href="#" onclick=" document.pager.curPage.value='<?= $pageNum-1 ?>'; document.pager.submit(); return false;">Previous&nbsp;|</a>
                    </li>
                    <?
                }
                if($arrPages[0]>3) {
                    ?>
                    <li>
                        <a href="#" onclick=" document.pager.curPage.value='0'; document.pager.submit(); return false;">1</a>
                    </li>
                    <li>...</li>
                    <?
                }
                if($pageNum<=2) {
                    $zpt="";
                    $correct=$pageNum;
                    foreach($arrPages as $value) {
                        ?>
                        <li <?=($value-1-$correct==$pageNum)?'class="page_select"':''?>>
                            <a href="#" onclick=" document.pager.curPage.value='<?= $value-1-$correct ?>'; document.pager.submit(); return false;"><?=$value-$correct?></a>
                        </li>
                        <?
                    }
                } elseif($pageNum>=$qtyPages-3) {
                    $zpt="";
                    $correct=$pageNum-$qtyPages+3;
                    foreach($arrPages as $value) {
                        ?>
                        <li <?=($value-1-$correct==$pageNum)?'class="page_select"':''?>>
                            <a href="#" onclick=" document.pager.curPage.value='<?= $value-1-$correct ?>'; document.pager.submit(); return false;"><?=$value-$correct?></a>
                        </li>
                        <?
                    }
                } else {
                    foreach($arrPages as $value) {
                        ?>
                        <li <?=($value-2)==$pageNum?'class="page_select"':''?>>
                            <a href="#" onclick=" document.pager.curPage.value='<?= $value-2 ?>'; document.pager.submit(); return false;"><?=$value-1?></a>
                        </li>
                        <?
                    }
                }
                if(end($arrPages)<$qtyPages || ($qtyPages>3 && $pageNum<=2)) {
                    ?>
                    <li>...</li>
                    <li>
                        <a href="#" onclick=" document.pager.curPage.value='<?= $qtyPages-1 ?>'; document.pager.submit(); return false;"><?= $qtyPages ?></a>
                    </li>
                    <?
                }
                if($pageNum<($qtyPages-1)) {
                    ?>
                    <li style="padding-left:10px;">
                        <a href="#" onclick=" document.pager.curPage.value='<?= $pageNum+1 ?>'; document.pager.submit(); return false;">|&nbsp;Next</a>
                    </li>
                    <?
                }
            }
            ?>
        </ul>
    </div>
    <?
}
?>

In your CSS style-sheet file add the following styles (for page links visual appearance). You will most-likely will modify it later to suit your website:

/* PAGING */
.page_num { float:right; min-width:10px; margin:14px 15px 20px 0; }
.page_num_link { float:left; }
.page_num_link ul { list-style:none; }
.page_num_link ul li { float:left; display:inline-block; margin-right:5px; }
.page_num_link ul li.page_select a { font-weight:bold; color:#c60300; }
.page_num_link ul li a, .page_num p a { text-decoration:none; color:#c60300; }
.page_num p { float:left; margin:0; width:50px; }

Now on the very top of your page where you want to implement paging add:

include $_SERVER['DOCUMENT_ROOT']."/includes/pager.php";

/* PAGING SETTINGS */
$numPerPage=(!empty($_REQUEST["numPerPage"]))?str_replace("'","",strip_tags($_REQUEST["numPerPage"])):5; // number of posts per page
$curPage=(!empty($_REQUEST["curPage"]))?str_replace("'","",strip_tags($_REQUEST["curPage"])):"0"; // current page, if nothing is supplied, it is 0
$fromRecord=$curPage*$numPerPage; // first post on page X = current page * number of posts per page

We will have 5 items per page. Change the $numPerPage number if you would like it to be different. Next, fetch your data from the database:

$sSQL="SELECT date, text FROM blog ORDER BY date DESC";
$result=mysql_query($sSQL) or die ("MySQL err: ".mysql_error()."<br />".$sSQL);
$total=mysql_num_rows($result);
if($numPerPage!='all')
    $sSQL .= " LIMIT ".$fromRecord." , ".$numPerPage;
$result=mysql_query($sSQL);
while($row=mysql_fetch_array($result)) {
    //display your data here
    ?>
    <div><?=$row['text']?></div>
    <?
}

Add a paging form anywhere on the page. We will be changing pages using this form:

<form name="pager" id="pager" method="post" action="/blog/">
    <input type="hidden" name="curPage" id="curPage" value="<?=$curPage?>" />
</form>

And finally, include the paging itself below or above your “posts”:

<div class="page_num"><?=paging($numPerPage, $total, $curPage)?></div>

Enjoy!

Tags:

Trackback from your site.

Leave a comment