Pagination within a div

Pagination within a div

Step 1: HTML

<link rel="stylesheet" href="css/main.css" type="text/css" />


<script src="js/jquery.min.js"></script>
<script src="js/pager.js"></script>



<div class="example">


    <h3><a href="#">pagination sample</a></h3>

    <div id="content">

<?php
$sql="select * from `tablename`";
if($dd=mysql_query($sql))
{
while($DD=mysql_fetch_array($dd))
       { ?>

<div class="z"><?php echo $DD['name']; ?> </div>

                  <?php }?>

</div>

    <div id="pagingControls"></div>

</div>

<script type="text/javascript">

var pager = new Imtech.Pager();

$(document).ready(function() {

    pager.paragraphsPerPage = 5; // set amount elements per page

    pager.pagingContainer = $('#content'); // set of main container

    pager.paragraphs = $('div.z', pager.pagingContainer); // set of required containers

    pager.showPage(1);

});

</script>

STEP 2: CSS

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}

.example{background:#FFF;width:1000px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}

#content p{text-indent:20px;text-align:justify;}

#pagingControls ul{display:inline;padding-left:0.5em}

#pagingControls li{display:inline;padding:0 0.5em}

STEP 3: JS

js/jquery.min.js   ( – just jQuery library. Available in package.)

js/pager.js 

var Imtech = {};

Imtech.Pager = function() {

    this.paragraphsPerPage = 3;

    this.currentPage = 1;

    this.pagingControlsContainer = '#pagingControls';

    this.pagingContainerPath = '#content';

    this.numPages = function() {

        var numPages = 0;

        if (this.paragraphs != null && this.paragraphsPerPage != null) {

            numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);

        }

        

        return numPages;

    };

    this.showPage = function(page) {

        this.currentPage = page;

        var html = '';

        this.paragraphs.slice((page-1) * this.paragraphsPerPage,

            ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {

            html += '<div>' + $(this).html() + '</div>';

        });

        $(this.pagingContainerPath).html(html);

        renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());

    }

    var renderControls = function(container, currentPage, numPages) {

        var pagingControls = 'Page: <ul>';

        for (var i = 1; i <= numPages; i++) {

            if (i != currentPage) {

                pagingControls += '<li><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></li>';

            } else {

                pagingControls += '<li>' + i + '</li>';

            }

        }

        pagingControls += '</ul>';

        $(container).html(pagingControls);

    }

}