How to build an ajax pagination with jquery & php

Written by ian low
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to build an ajax pagination with jquery & php
Adding pagination to long pieces of text can make your website more user-friendly. (Phil Ashley/Lifesize/Getty Images)

If you need to display long pieces of text, such as articles or stories, on your website, you can separate it into pages, using pagination functionality written in JQuery, Ajax and PHP. As with most dynamic web pages, the example here also involves HTML and CSS. This article assumes that you have a basic understanding of the languages involved, and provides links to working examples.

Skill level:
Moderate

Other People Are Reading

Things you need

  • Webserver with PHP

Show MoreHide

Instructions

  1. 1

    Download jquery-1.5.1.min.js (see Resources).

  2. 2

    Open Notepad and type any test data into the file. There should be at least 20 lines. Save the file as "mytestdata.txt" on your desktop. Close Notepad.

  3. 3

    Copy and paste the following code into a blank file in Notepad. Save the file as "pagination.php" on your desktop. Notice that this is a self-calling PHP file. It tests for whether it is called via Ajax. If so, it outputs the contents of "mytestdata.txt" and then quits. Otherwise, it displays the HTML section. See Resources for link to a working example.

    <?php

    $filename="mytestdata.txt";

    $file=fopen($filename,"rb");

    $data=fread($file,filesize($filename));

    fclose($file);

    if((strtolower($_SERVER['HTTP_X_REQUESTED_WITH'])=='xmlhttprequest')

    && ($_GET['page']!="")){

    $data='<pre style="border:solid; border-width:1px; word-wrap:break-word; font-size:80%;font-family:Times New Roman;">'.$data.'';

    echo $data;

    return;

    }

    ?>

    <html><head></head><body>

    <div id='text' ></div>

    <script type='text/javascript' src='jquery-1.5.1.min.js'></script>

    <script>

    $(document).ready(function(){

    $('#text').load('pagination.php?page=1');

    });

    </script>

    </body></html>

  4. 4

    Copy the following lines, and paste them after "$filename="mytestdata.txt";". Notice that these lines test for whether the number of lines per page, or file name was specified in the URL, otherwise it defaults to 10 lines per page and "mytestdata.txt".

    $linesPerPage=$_GET["lpp"];

    if($linesPerPage=="") $linesPerPage=10;

    $filename=$_GET['file'];

    if($filename=="") $filename="mytestdata.txt";

  5. 5

    Copy the following lines, and paste them after "fclose($file);". Notice that the contents of the file are read into an array called "$lines", from which the total number of pages is calculated. It then extracts only the lines belonging to the specified page into the "$data" variable. The page number is specified in the "page" parameter in the request URL. See Resources for link to a working example.

    $lines=explode("\n",$data);

    $numberOfPages=count($lines)/$linesPerPage;

    if($numberOfPages>floor($numberOfPages))

    $numberOfPages=floor($numberOfPages)+1;
    

    $fromPage=$_GET['page'];

    $fromLine=($fromPage - 1) * $linesPerPage;

    $toLine=$fromPage * $linesPerPage;

    $data="";

    for ($i=$fromLine; $i<$toLine; $i++){

    $data=$data.$lines[$i];
    

    }

  6. 6

    Copy the following lines, and paste after "<div id='text' ></div>". Notice that this creates a list of page numbers for user selection.

    <ul id='pagination'>

    <?php

    for ($i=1; $i<=$numberOfPages; $i++){

    echo "<li id='".$i."'>".$i."</li> ";

    }

    ?>

    </ul>

  7. 7

    Copy the following lines, and paste after "$(document).ready(function()){". Notice that the PHP code assigns PHP variables to JavaScript variables.

    <?php

    echo "var filename='".$filename."';\n";

    echo "var linesperpage='".$linesPerPage."';\n";

    ?>

  8. 8

    Copy the following lines, and paste below the line "$('#text').load('pagination.php?page=1');". Notice that the JavaScript function "dispLoad()" takes the page number as parameter and uses the JQuery Ajax "load()" function to load the file into the "text" div. The filename, page number and lines per page are specified as parameters in the request URL.

    function dispLoad(pageNumber){

    $('#text').load('pagination.php?file='+filename+'&page='+pageNumber+'&lpp='+linesperpage);

    }

    $('#pagination li').click(function(){ dispLoad(this.id); });

  9. 9

    Copy and paste the following style section inside the head section of the HTML code. Notice that these change the layout of the user selection page numbers, so they are no longer displayed as bullet points.

    <style>

    li{list-style:none; float:left; border:solid 1px #eeeeee; colour:#0000aa; cursor:default; margin-right:0px;}

    </style>

  10. 10

    Replace the line "$('#text').load('pagination.php?page=1');", with the line below.

    dispLoad(1);

  11. 11

    Copy and paste the following lines just after "function dispLoad(pageNumber){". Notice that the first line greys out all the page numbers, and the second highlights only the selected page number. See Resources for link to a working example.

    $('#pagination li').css({'color':'#aaaaaa'}).css({'border':'solid 1px #eeeeee'});

    $('#'+page Number).css({'color':'#000000'}).css({'border':'solid 1px #aaaaaa'});

  12. 12

    Save pagination.php, and upload it to the root directory of your Webserver, together with mytestdata.txt and jquery-1.5.1.min.js. Point your browser to "pagination.php" on your Webserver, and test that it works.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.