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