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> <?php //Show page links for($i=1; $i<=$pages; $i++) { echo ' <li>'.$i.'</li> '; } ?></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> </td> <?php for($j=0; $j <td></td> </tr> </table> </div>
Full Source
click to see live DEMO here
Pingback: Ajax Pagination with Anchor Navigation « Beschi’s Portfolio
Seems to be a good addition. 🙂
Thanks for your opinion.
# //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.
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.
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
Thanks ChileCaliente.
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
You mean displaying only 10 page numbers with PREV and NEXT if the total pages are 100…?
If you are in page 25, then the page numbers 20 to 30 will be displaying…. rite?
I will work out and tell you in a week.
Thanks.
correct… i think it’s will be much better than if you display 100 page numbers in our site…
Hey, did you ever get a chance to look at this?
Hey dude, great help your article.
Did you eve ge anything done on this? I’m confused and have tried many times to get it working.
Thanks for a great script. Is there a solution for displaying less page numbers? Thanks.
no
Thank you very much its usefull for me
okey.
Pingback: Best Collection of jQuery Tutorials, Gift for Designers & Developers. | guidesigner.net
Pingback: Best Collection of jQuery Tutorials, Gift for Designers & Developers. | Web Design GroundBreak
Pingback: Noteefy - Be aware » Best Jquery Lessons Of The Month
Pingback: I migliori plugin di jQuery in circolazione sono qui | Italian webdesign
Hi are u etho dot com ???? i saw ur tutorial and its nice but ur pic seems to be like him
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.
Pingback: 今日のゆるニュース « attrip
Very good and simple script.
Thanks Assaad.
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
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.
I have sent source to you, please find email with subject ‘Cannot integrate your code with jqueryui’
Thanks zuki
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.
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.
Thanks Th.
I am not familiar with language handling. Please refer some other articles related to language handling with database and html.
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.
Thanks mousesports,
Pls refer this post: https://beski.wordpress.com/2009/07/13/ajax-jquery-paging-with-magic-links/
Nice script for practicing paging in Jquery.
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.
replace with
and
with
and
??
Same problem dude
Hi , I like this script but can u tell us if we want make a page not clickable when we see the same page.
Smile…
thank you so much
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.
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.
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 .
This is very nice article . please make available .zip file to download
thanks, nice
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.
Yes Jennifer,
Thanks for your comment. Please read my other comments.
I don’t use such code in the following tutorials.
Ajax Pagination with Jquery,PHP,Mysql
not working.. when i test your free code download into your website.
Pingback: php, jquery pagination
.rar cant open
Pingback: 2010 review – Pagination and anchor scroll are most wanted | Beschi's Works
thx, was so good! respect 🙂
where is $page defined?!
(from: $start = ($page-1)*4; )
it causes a mysql error…
Hope you got your answer by my mail.
🙂
thnks for the tutorial…
Pingback: Pagination with jQuery, MySQL and PHP.
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
Hi!!
Good job. However, how can we put in place an hyperlink with previous page and next page if needed?
Thanks,
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
D5hOrR http://gdjI3b7VaWpU1m0dGpvjRrcu9Fk.com
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.
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
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.
🙂
I wish there were examples to use this in postgres. When I change methods from mysql to pg it goes crazy
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
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.
Pingback: My Bookmarks « Ruman's Blog
source link still broken,. can you upload at 4shared.com ???
or send to email yukka_herlambang@yahoo.co.id
thanks
hi
Very nice post,,,take a look at how i have implemented it
http://www.designaeon.com/jquery-ajax-pagination/
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
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.
Pingback: Ajax Pagination with Jquery, PHP, Mysql | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes
Great work! Thanksss! ,
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
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.
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
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!
This is my first time pay a visit at here and i
am genuinely pleassant to read all at single place.
There’s definately a lot to know about this issue. I like all of the points you have made.
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
Suggestions about Discovering the right Security Video camera – Image resolution
the file is missing i can’t download the full source…
can you the file in my account yellowflash717atgmaildotcom.
thanks in advance!
Good job. Beski
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.
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?
This post is genuinely a fastidious one it assists new net visitors,
who are wishing in favor of blogging.
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.
Thanks for sharing your tthoughts on skin breakdown. Regards
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.
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!
Pingback: Ajax Pagination with Jquery, PHP, Mysql [closed] - QuestionFocus
Pingback: php - Pagination Ajax avec Jquery, PHP, Mysql
Pingback: Ajax Pagination with Jquery, PHP, Mysql [closed]
Pingback: Ajax Pagination with Jquery, PHP, Mysql