Ajax Jquery Paging with Magic Links

What Is This?

Already we have seen the Magic Link post – a tricky ajax links for making it works with the javascript disabled browsers.
Here, we are going to see how to make a pagination ajax links in the above mentioned trick.
By this way, one can easily change a normal paging into ajax paging by adding a javascript and making some changes.


Understanding The Layout

Imagine already we have a normal page with a pagination (say index.php).
First time, the default page number is 1 and the first page will load, for paging we have the links like

<a class="magic-links" href="index.php?page=1">1</a>
<a class="magic-links" href="index.php?page=2">2</a>
<a class="magic-links" href="index.php?page=3">3</a>
.
.
.

The content(table) loads inside a content div, this content div is placed inside container div.

<div id="container" style="height:200px;">
<div id="content">
<table border="0">
.
.
.</table>
</div>
</div>

When we click on a page link the whole page will reload again with new content in the table.


The Trick

On clicking the page link do the following,
1. stop the default action
2. get the href value (index.php?page=x)
3. send request to server via ajax
4. get the result
5. load content div into container div
Can’t understand? see the code,

$("a.magic-links").click(function(e){
e.preventDefault();

//define the target and get content then load it to container
var url = $(this).attr("href");
var targetUrl = url + " #content";
container.load(targetUrl, hideLoading);
});

Thats all, now the normal paging will work as ajax paging. Also it will work though there is no javascript on the browser.


Demo and Download

After adding some loading and page number highlight effects the complete code:
DEMO
DOWNLOAD


Advertisements
This entry was posted in Ajax, Jquery, PHP, Tutorial and tagged , , , . Bookmark the permalink.

23 Responses to Ajax Jquery Paging with Magic Links

  1. muki says:

    hello,
    this is a wonderful script. However, I modified it and I’m having problems.
    As per my game script, I need to put the link in the content DIV like this

    <a href="?gmeid=2" rel="nofollow">Play</a>

    In this case, the games will be shown except the game just clicked.

    But… It works just one time. The next time I click, it reloads the whole page (meaning the effect is not applied) Please help correct this

    Thanks

  2. muki says:

    The code
    <!–

    <a href="?playGame=” class=”magic-links”>Play |

    –>

  3. muki says:

    I’m having problems pasting the code here. However, I place the PHP code with the

    It works just once and when you click again, the whole page is reloaded

  4. muki says:

    ok sir

    I will appreciate

  5. webnet says:

    tnx . very helpfull

  6. Pingback: 2010 review – Pagination and anchor scroll are most wanted | Beschi's Works

  7. natraj says:

    i haven’t tried this script. but this is the concept that everyone wants to know after learning the basic programming. you had written as if a kilipillai can understand. kudos man! keep going. We need more from you.

    • Beschi says:

      Thanks natraj.

      This year I haven’t write much, some changes in my life and career keeping me busy. Now I am a Drupal developer. Will write about Drupal and Jquery in the following posts.

      -Beschi A.

  8. Ivo says:

    Muki,
    take a look:
    var targetUrl = url + " #content";

    Must be
    var targetUrl = url + " #container";

  9. JB says:

    I have tried this examle as well as your other paging ajax example both ones only show the results on the first page. the only thing I changed was the db info and the column names

  10. I have one array which can contains all of data now , i want to display it by paging and also want to do data manipulation in it such like ajax. have you any idea ?

  11. alexcoloma says:

    “It works just once and when you click again, the whole page is reloaded”

    Use the ‘live’ function. Try this:

    $(“a.magic-links”).live(“click”,function(e){

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s