Breaking News
You are here : Home » Web development » Ajax » Jquery-Php Ajax Pagination
Ajax pagination php-jquery

Jquery-Php Ajax Pagination

Jquery-Php AJAX Pagination(Ajax paginator):

Hola Friends! Jquery-Php Ajax Pagination is used to create Ajax Based Pagination for your website.It is better to have Ajax Pagination on Your Webpage as Ajax Pagination will load only the specific part rather than whole page.So it will speed up your website.So we are implementing this Ajax paginator with the help of Jquery .So You need to know Jquery ,Jquery is lot easier than javascript ,so its not big deal ,if you dont know it.you just need to follow the instructions to implement this Jquery-Php Ajax Pagination.This Web Tutorial for Ajax paginator is very simple to understand and you will love this.I have include source code download link at the bottom of the page.

So now we lets get started with our first step to build ajax pagination

so firstly we need to have 2 files :- Php database class and global file.I have included these files in below .if you dont wana use these for database connectivity or have your own connection logic then you can just ignore them.we dont need to edit database class file ,but in the global file we supply our contant like :database name,password etc.

global.inc.php file:

so our db connection cofig file (global) file is ready now we move on to create page where we want to show up our Ajax Pagination .

in our page where we wana display Jquery- Php Ajax Paginator we include database class file and global file as below:

Now that was the first part of the database connection realted.if you have you own database class or function you can just skip this step and use your own functions to fetch data.but i m using my class fucntions ,so you can replace those methods with yours.

Now on our page where we wana show the pagination we do some Php pagination logic like below:

Now we have done printing the pages,just the pages ,no data is printed yet as data will be printed by our Ajax jquery script . See carefully that each li element is been given class according to the page it belong.which will be furthur used by Jquery Ajax script which will load content according to the page.

we give some style to our printed pages. see the style.css below:

Style.css

After applying the style our paginator will look like this:

Ajax pagination

paginator Jquery Php Ajax Pagination

Ajax paginator

[separator/]

Now we have added Pages count in our paginator according ro our pagination logic(eg:per page,pages count);

So firstly we include Jquery library in our head tag and also ajax.js file where our ajax logic reside.

Also we will create a div element inside body where Ajax data will come. i given the div id=’res’ as in the Ajax script.you can give different id but then you have to change it in ajax script also

On the Next step we will create a PHP script file which will be used by Jquery Ajax Paginator script.This Php script will also connect to database and fetch the data according to the current page.the page no will be passed by the Ajax script to this php file. PHP data Script(data.php):

The above script will accept get variable called page and then fetch data the data according to that page.Now our data script is ready now we move on to our Ajax script which will call data.phpby GET page variable.The Ajax Jquery script will be called when the li element of the Paginator pages is clicked.the Ajax script will get the class name of the current li element.the class name is a page no which will be futher passed to data script to fetch data regarding to that page then then finally data is printed back on the div with some id ‘res’.div with id =’res’ is included above the printed pages by us already where the data will come. so just before closing body tag include the Ajax script:

Now lets take a look at Ajax script of Jquery Php Ajax pagination .

AJAX SCRIPT(ajax.js):

This is very simple Ajax script.on the click event on the pages class li element the script grabs the class of the clicked li and then pass it to data.php to load data that was simple .but you might be looking at showloader and hideloader functions of the Ajax Paginator .These functions are just simple to show and hide loader animation while the data is being loaded and loaded.  To achive this loader animation we add a little code to the file where paginator is printed.

add some style to search background class.

Style.css:

As we can see the search-background class is hidden by default .so content inside it will not be shown.when we click on page no then it shows and after data is loaded the then it hides.

That was all from the Jquery – PHP Ajax pagination(ajax paginator)  .I hope You like the Tutorial.See the live demo below or Download the source code.

[jbutton icon="globe" size="xlarge" link="http://demo.designaeon.com/ajax-paginator/" newpage="yes"]Live Demo[/jbutton]

[jbutton icon="download" size="xlarge" link="http://download.designaeon.com/ajaxpaginator.rar"]Download[/jbutton]

Thanks for visiting the DesignAeon and viewing our Jquery Php ajax pagination post.Please hit like share and rate if you liked this post

[separator/]

Tags : , , ,

13 Replies

  1. M8ke says:

    Thanks for the tut Ramandeep… I want to implement this to my wordpress blog on single.php (still running locally with wampserver).

    I want to display under my post a list of all articles from another category and paginate it using your method.
    Any help please ?

  2. admin says:

    Why would you want to do that on wordpress blog,,,,That is not seo friendly for your blog,,,,
    if you still want it there are lots of plugins available in wordpress,,,,
    if you dont find,,,any suitable may be i’ll write a post on that after my exams (4 may),,,,,,,

  3. M8ke says:

    How is it not seo friendly ?
    I’m trying to use as less plugin as possible. Here’s an example of what i would like to do… Is it possible and how about seo ?
    thanks for your quick answer and good luck for your exams…

  4. admin says:

    Actually Ajax is not identified by the search engines….They do not able to crawl ajax content,,,eg.you create a ajax pagination links,,Those links are not edentified by search engines and they won’t be able to crawl your other pages…..

    Tnx mate exams goin good.

  5. Ramandeep Singh says:

    hey buddy take a look at this one to to convert your wordpress pagination to ajax pagination
    http://www.designaeon.com/wordpress-ajax-pagination/

  6. SB says:

    Good stuff. Keep it up.

    But i have a question..
    I tried to use it on search. but it doesn’t seem to work. LIke, paginating my search result.

    here it goes, in my index.php there’s a search form, i use ajax/jquery to get the results.i get the results from search.php using ajax/jquery.but i find it hard to put and work the pagination stuff.

    Any help i’ll appreciate it alot.
    Thank you in advance Mr. Ramandeep. :)

    1. Ramandeep Singh says:

      I thought about it today and make a post of it ,,,here:
      http://www.designaeon.com/paginate-search-results-using-ajax-pagination/
      That would solve your problem

  7. SB says:

    Thank you for your quick response. That was awesome. A nice article indeed.

    But, can you help me? i still don’t get it, when i implement it on my project.
    the pages goes like this:
    i have page name index.php -> here i have shown results but using php not getting/passing through jquery. pure php results. then in my index.php, i have a search form, the search form,when i keyin/keyup it automatically get results from page search.php. (live search.no problem in it). but here it goes, the pagination in search.php doesn’t seem to work. when i click in it.it will bring to the actual page.not ajax calling.
    I really find it hard to implement both, live search with pagination.

    But still thank you for this nice article.
    Any help from you i’ll appreciate it alot. Thanks in advance Mr. Ramandeep.

    :)

    1. Ramandeep Singh says:

      There must be Some kind of class or id Conflict issue that you have to find,,Also you dont need to use anchor tag in the ajax pagination.,i recommend you to completely understand the article i have written on search result pagination .download source files ,,read them carefully.
      http://www.designaeon.com/paginate-search-results-using-ajax-pagination/

  8. Dejan says:

    Thank you so much!!

Leave a Reply

%d bloggers like this: