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

---