Ajax Pagination with Jquery,PHP,Mysql

This is my first experiment in Ajax (I don’t know how to explain this, many thanks if experts give me some tips).

Many thanks to http://yensdesign.com , this post http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/ of him just give me an idea to do this.

This Package can load data from table and with all fields.
This contains 5 files
1. content.php (php file that get data from db and send back to the test.php file)
2. test.php (this is the file to be run, before run we must set 7 variables)
3. jquery.js
4. paging.js (this contains the script to sendajax request and get the data)
5. testDB.txt (sample mysql db file)

How to use:
1. Edit test.php and set the 7 variables – per_page, db_name, table_name, order_by then connection variables hostname, username, password
2. Make sure the table exist, correct connection variables and dont miss to set the order_by variable
3. Run test.php

How script works
This is how the paging.js script works
1)
showLoading and hideLoading are functions to show/hide the loading div
2)
When a page no clicked, will call pages.click fucntion, then
show the loading div
reset the page link – make the currently clicked page highlighted
set the url to be sent to the content.php page with page number and all other 7 variables set before
call content.load(url,hideLoading)
3)
initially set the first page loaded

Advantages:
No need to specify the table fields, it will fetch all column names and show them automatically
Configuration settings at only one place
Simple and easy to understand (i hope), not much css works here, so we can change the appearance as we want

test.php (change settings/css here)





	Ajax Load Table - Pagination -  yensdesign.com

body { margin: 0; padding: 0; font-family:Verdana; font-size:10px }
#loading { width: 100%; position: absolute; text-align: center; font-family:Trebuchet MS; font-size:12px; color:#008000; font-weight:bold }
li{	list-style: none; float: left; margin-right: 16px; text-transform: uppercase;	color: #c2c2c2; }
li:hover{ color: #6fa5fd; cursor: pointer; }



<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1">
<tr>
<td>
<ul>
				&lt;?php
				//Show page links
				for($i=1; $i&lt;=$pages; $i++)
				{
					echo &#039;
	<li>'.$i.'</li>
';
				}
				?&gt;</ul>
</td>
</tr>
<tr>
<td>
<div id="loading" style="position:absolute;">
					LOADING...</div></td>
</tr>
<tr>
<td>
<div id="content" style="height:200px;"></div>

					
					
					
					
					
					
					
				</td>
</tr>
</table>
</div>

	


paging.js (no need to change anything)

$(document).ready(function(){
	//References
	var pages = $("#menu li");
	var loading = $("#loading");
	var content = $("#content");

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}
	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};

	//Manage click events
	pages.click(function(){
		//show the loading bar
		showLoading();

		//Highlight current page number
		pages.css({'background-color' : ''});
		$(this).css({'background-color' : 'yellow'});

		//Load content
		var pageNum = this.id;
		var targetUrl = "content.php?page=" + pageNum + "&" + $("#myForm").serialize() + " #content";
		content.load(targetUrl, hideLoading);
	});

	//default - 1st page
	$("#1").css({'background-color' : 'yellow'});
	var targetUrl = "content.php?page=1&" + $("#myForm").serialize() + " #content";
	showLoading();
	content.load(targetUrl, hideLoading);
});

content.php (process request and send response)






Result


<div align="center" id="content">
<table border="0" cellpadding="2" cellspacing="2" width="100%" id="table1">
<tr>
<td>Sl. No</td>

<td></td>
</tr>

<tr>
<td>&nbsp;</td>
&lt;?php
			for($j=0; $j
<td></td>
</tr>
</table>
</div>


Full Source
click to see live DEMO here

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

94 Responses to Ajax Pagination with Jquery,PHP,Mysql

  1. Pingback: Ajax Pagination with Anchor Navigation « Beschi’s Portfolio

  2. Seems to be a good addition. 🙂

  3. beski says:

    # //EDIT these 3 variables for connection
    # $hostname = “localhost”;
    # $username = “root”;
    # $passwd = “”;

    – Its not advisable to use this. Better using a config.php for db connection.
    Because the user can view the connection parameters by viewing thew page source.

    • bb says:

      I don’t think the user can view the connection parameters. The PHP variables are phased out by the PHP interpreter (web server), unless you echo or print the variables of course.

      • beski says:

        The variables are set to be hidden to be transferred to the content fetching page.
        So if the user view the source he can view.
        So better using a config file for database connection.

        There is an other problem in using GET method in ajax, will post the solution in 2 days.
        Thanks for your comment.

      • Hello
        They can see the connection parameters in the form, i just view the source of my page in IE8 and firefox, so a config.php is better to use for secure reason.

        Thanks

      • beski says:

        Thanks ChileCaliente.

  4. iwanhg says:

    is it possible to make it per 10 pages? i mean, if you have 1000 records, and per page is 10 records, it’s will displaying 1 – 100 numbers. how to make it per 10 pages as like google search

  5. Ramakrishna says:

    Thank you very much its usefull for me

  6. Pingback: Best Collection of jQuery Tutorials, Gift for Designers & Developers. | guidesigner.net

  7. Pingback: Best Collection of jQuery Tutorials, Gift for Designers & Developers. | Web Design GroundBreak

  8. Pingback: Noteefy - Be aware » Best Jquery Lessons Of The Month

  9. Pingback: I migliori plugin di jQuery in circolazione sono qui | Italian webdesign

  10. Suresh says:

    Hi are u etho dot com ???? i saw ur tutorial and its nice but ur pic seems to be like him

    • beski says:

      Hi suresh,
      yes, I am yetho.com
      after starting that blog i have no time to write tutorials here.

      anyway, if I found anything special, sure I will write.

  11. Pingback: 今日のゆるニュース « attrip

  12. Assaad says:

    Very good and simple script.

  13. zuki says:

    Hi Beschi, I can’t integrate your code with jquery-ui…
    Please try insert jquery-ui code inside on file of content.php, it will not work…
    any solution

    • beski says:

      Hi zuki,
      I can not understand.
      I do not use javascript in content.php file.

      Can you mail me your source? i will try something.

      • zuki says:

        I have sent source to you, please find email with subject ‘Cannot integrate your code with jqueryui’

        Thanks zuki

  14. Margaret says:

    I can’t get it to work. Paging seems to be working but besides that nothing is being displayed. Any idea what may be wrong with the code.

  15. Th says:

    hi,

    thank for this nice easy fast ajax thing. But
    I found that it’s not reading arabic content
    correctly. It’s showing arabic letters like
    (??????) !! .. even when adding charset=windows-1256
    to the headings … Hope you fix this ASAP.

    Thanks again,
    Thamer from KSA.

  16. mousesports says:

    Hello Beski, thanks for your post.

    I am quite new to this. I see what you mean by the values being shown when you view the page source. How would I go about hiding that information? You say create a config.php, but then? I threw the variables in the file config.php and require ‘config.php’; in test.php but that leads to the same problem.

    Help much appreciated! Thanks.

  17. Arun says:

    Nice script for practicing paging in Jquery.

  18. John says:

    Thx for the script! With no changes in source code I get the following error(s):
    “Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in […]\content.php on line 32” and
    “Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in […]\content.php on line 43”
    I used the sample db. The db parameters should be set correctly.
    Any ideas?
    Thanks in advance.

  19. Abhinav says:

    Hi , I like this script but can u tell us if we want make a page not clickable when we see the same page.

  20. Sushil says:

    Thank you very much for this ajax pagination Code.

    Can you please Keep the files for downloading in .ZIP format. That is the convenient one for people using different platforms. Even in RAR there are options to chose the format of the file compression.

  21. minh says:

    THank you for sharing. This is a great script. I have one question. How do I include the paging on the bottom of the search result.

  22. Zisis says:

    Hello . i just wanted to ask if there is a simple way to auto change page views without clicking on the next page.
    Thank you .

  23. shailendra1984 says:

    This is very nice article . please make available .zip file to download

  24. murugan says:

    thanks, nice

  25. jennifer says:

    This is not a very good script it is vulnerable badly anyone can get your pass and login info, by looking at the source code. I would not be using this, sorry. Secure it first then i will think about it.

  26. ichigo says:

    Ajax Pagination with Jquery,PHP,Mysql
    not working.. when i test your free code download into your website.

  27. egy másik user says:
  28. Pingback: php, jquery pagination

  29. mahesh says:

    .rar cant open

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

  31. svanigiorgi says:

    thx, was so good! respect 🙂

  32. strigga says:

    where is $page defined?!

    (from: $start = ($page-1)*4; )

    it causes a mysql error…

  33. edward says:

    thnks for the tutorial…

  34. Pingback: Pagination with jQuery, MySQL and PHP.

  35. juanpons14 says:

    I recommend don’t use this code….it discover your mysql password.
    With a simple view of the source code anyone can see your password

  36. arthur says:

    Hi!!

    Good job. However, how can we put in place an hyperlink with previous page and next page if needed?

    Thanks,

  37. mark says:

    why do i receive this error..even thou i didn’t change anything..

    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\content.php on line 32

    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\content.php on line 43

  38. JJ-DR says:

    I keep getting the following two errors:

    1)
    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in F:\wamp\www\ajax paging\content.php on line 32

    2)
    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in F:\wamp\www\ajax paging\content.php on line 43

    Any idea why I get that error?
    Thanks.

  39. Rafael says:

    Hi
    Adding in the content.php – line 15 – instead of ($page-1)*10, replace the number 10 with $per_page. That will avoid an issue when you have less than 10 records in your db.

    Otherwise, It is a very good example of how to paginate with jquery, ajax and php.
    Just be careful because your db user and pass are being displayed when inspecting the code.

    cheers

    • Beschi says:

      Yes, it was wrong to show the db connection properties, I have already commented abt that.

      Better, I will remove this post and give an updated one.

      Thanks.
      🙂

  40. me says:

    I wish there were examples to use this in postgres. When I change methods from mysql to pg it goes crazy

  41. Ron says:

    hi
    if javascript is disabled it does not work. i mean there is no fallback in the case when javascript is disabled.
    the thing is that ajax should be an addition to the regular workings of an application.

    someone knows how to make it to work when JS is enabled and disabled?
    best regards

  42. goalsurfer says:

    Hi Beski,
    Your script really brought a solution for something I couldn’t find: integrating ajaxpagination with smarty. I tried to integrate your script in smarty and it works!
    Now I would to know if there isn’t a way to get more control about how your results display.
    I suppose it must be in these code lines from content.php:

    while($rs = mysql_fetch_array($rsd))
    {
    $i++;
    ?>

     
    <?php
    for($j=0; $j

    <?php
    } //while

    but prefer first to ask it before messing with code. I read all comments over and wonder why nobody else gives a remark about this.

  43. Pingback: My Bookmarks « Ruman's Blog

  44. donkthologist says:

    source link still broken,. can you upload at 4shared.com ???
    or send to email yukka_herlambang@yahoo.co.id
    thanks

  45. Very nice post,,,take a look at how i have implemented it
    http://www.designaeon.com/jquery-ajax-pagination/

  46. itswadesh says:

    Hello Beski,
    I’m Swadesh from Odisha. I run a blog itswadesh.wordpress.com similar to yours. Even i use the same wordpress.com instead of wordpress.org. Now i’m planning to move to wordpress.org. As you know there is no income here. Can we be friends. so that we can share some thoughts.
    email: itswadesh@gmail.com

  47. Tjglgtlm says:

    I want to make a withdrawal http://okihijoerato.de.tl teen model virginia Zoe Rae is her name, but she is hard to find. post the link if you have seen her someone else.

  48. Pingback: Ajax Pagination with Jquery, PHP, Mysql | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

  49. Donald says:

    Great work! Thanksss! ,

  50. I’m not that much of a internet reader to be honest but your blogs really nice, keep it up!
    I’ll go ahead and bookmark your site to come back in the future. All the best

  51. You’ve made some good points there. I looked on the web to learn more about the issue and found most individuals will go along with your views on this website.

  52. Its like you read my mind! You appear to know a lot about this, like you wrote the book in it or something.

    I think that you can do with some pics to drive the message home a
    bit, but instead of that, this is fantastic blog.
    A fantastic read. I’ll certainly be back.
    blogs.journallive.co.uk

  53. It’s a shame you don’t have a donate button!

    I’d most certainly donate to this brilliant blog! I suppose for now i’ll settle for bookmarking and adding your RSS feed to my Google account.
    I look forward to fresh updates and will talk about this website with my Facebook
    group. Chat soon!

  54. Rafael says:

    This is my first time pay a visit at here and i
    am genuinely pleassant to read all at single place.

  55. There’s definately a lot to know about this issue. I like all of the points you have made.

  56. Unquestionably believe that which you said. Your favorite reason appeared to be on the net the simplest thing to be aware of.

    I say to you, I definitely get annoyed while people think about
    worries that they just don’t know about. You managed to hit the nail upon the top as well as defined out the whole thing without having side-effects , people could take a signal. Will probably be back to get more. Thanks

  57. Suggestions about Discovering the right Security Video camera – Image resolution

  58. cool says:

    the file is missing i can’t download the full source…
    can you the file in my account yellowflash717atgmaildotcom.
    thanks in advance!

  59. netflix card says:

    Hey! I know this is somewhat off toplic but I was wondering which blog platform are you using for this site?

    I’m getting tired of WordPress because I’ve had issues with
    hackers and I’m looking at alternatives for another platform.

    I would be awesome if you could point me in the
    direction of a good platform.

  60. Heya! I just wanted to ask if you ever have any issues with hackers?
    My last blog (wordpress) was hacked and I ended up losing
    a few months of hard work due to no data backup. Do you
    have any methpds to stop hackers?

  61. This post is genuinely a fastidious one it assists new net visitors,
    who are wishing in favor of blogging.

  62. Its such as you learn my mind! You seem to grasp
    a lot approximately this, like you wrote the ebook in it or
    something. I believe that you simply could do with
    some p.c. to power the message home a bit, but other than that, that is great
    blog. An excellent read. I’ll certainly be back.

  63. Thanks for sharing your tthoughts on skin breakdown. Regards

  64. Hi to all, how is the whole thing, I think every onee is getting more
    from thiss site, and your views are nice in support
    of neew viewers.

  65. Lin says:

    I’m really enjoying the design and layout of your site.
    It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit
    more often. Diid you hire out a developer to crete your
    theme? Outstanding work!

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