Breaking News
You are here : Home / Web development / Ajax / Paginate Search Results using Ajax Pagination
Paginate Search Results With Ajax Pagination

Paginate Search Results using Ajax Pagination

Paginate Search Results using Ajax Pagination:

Hi Buddies ! I have written Ajax Pagination previously ,But this time i come with some modification to Ajax pagination so that we can Paginate Search Results with Ajax pagination Too.Most of the Pagination concepts are same as in my previous post about Ajax Pagination ,but a little bit addition here.So lets see how to paginate our search results using Ajax Pagination.

[jbutton icon=”globe” newpage=”yes” link=”http://demo.designaeon.info/ajaxpaginator-search/” size=”xlarge”]LIVE DEMO[/jbutton] [jbutton icon=”download” link=”http://download.designaeon.info/ajaxpaginator-search.rar” size=”xlarge”]DOWNLOAD EXAMPLE[/jbutton]

 

[separator /]

Paginate Search Results with Ajax Pagination :: Files –

The Following Files We need to paginate search Results.When You download the source code from above or below you will see the Following Files:

  • libs(File Folder)
    • global.inc.php :Contains the My sql Connection information
    • db.class.php : Mysql Database class used to fetch data .
  • Index.php :The index File.Contains all results with Ajax pagination.
  • search.php:The File which will show search results.
  • Style.css :The Main Stylesheet File
  • Jquery.js:The Javascript Framework Library File.
  • ajax1.js  :Contains Jquery/javascript code for ajax Pagination and Paginate search results.
  • data1.php :The File receives the Get params from ajax1.js and send back the results.File is Accessible throught ajax1.js
[separator /]

Paginate Search Results with Jquery Ajax Pagination :: Usage –

Let move on and see how to paginate search Results with Ajax pagination.I want you to download the full source code and place inside your project and edit some Files as i guide  to make them work.I this Tuet I am telling you how to include the ajax pagination and paginated search in your project.

Paginate Search Results with Ajax Pagination :: Edit Global File:-

So firstly we setup our global.inc.php file.You need to edit it to match your database configuration. See below:

Global.inc.php:

This global.inc.php  file uses the database class created by me.if you dont wana use my database class then you can simply core function mysql_connect in global file to connect to database .But you need to edit every where else where i used database class.

So i recommend to use db.class.php . Actually its good and robust way to have oops class .

[separator /]

Paginate Search Results with Ajax Pagination :: Include Global and database class and other files:-

Now we include the Global file and Database class where we want pagination to happen.IN the Example Files the Pagination happens in the index file and the Search Results are paginated in the search.php file .And the Results are fetched by ajax request in data1.php file ,So all these Files(index.php ,search.php,data1.php) Require database class  and global file .So in your project the search might happen to any page and also you need pagination in some other page.So where ever you need you have to include the database and global file.

So at the Top of these files we write.

and At the bottom of Index.php(main pagination) search.php(pagination with searching) just before the closing body tag we write.

and in the Head tag we’ll include :

[separator /]

Paginate Search Results with Ajax Pagination :: Main Pagination and Search Pagination Logic:-

Now we have included Database Class and Global files .Now we move on and see our pagination logic for the main page and Search page respectively.IN example the main page is the Index.php and search page is search.php.In your project project the main pagination page may be post.php and search might happen in search-post.php . So don’t get confused.I m telling the logic what need to be used.

Main Pagination Logic:

The index File also contains a search from which send get param to Search.php .The Page has php code to find all the result count and then Create a List .Each li refers to a page no .So which jquery use it pass page no to the data1.php . So data1.php process it and gives data.

Search Pagination Logic:

The search page receives get variable from index.php and filter out the result.The Search page is very similar to index but have small changes you can see here.

[separator /]

Paginate Search Results with Ajax Pagination :: Core Script and Ajax Data File:-

Now we have a look at the script and the php data file which is resposible for this ajax pagination and paginating search results.So first we take a look at ajax(ajax1.js) file which we included above just before closing body tag.These Files are heart of Ajax search Pagination.

ajax1.js

This File loads the ajax data from the data1.php file which is been described below.This send the get variable to the file data1.php so that data1.php file understand at which page we are and from where data should be loaded.Also in case of search this file sends the extra get param  named as q ,which is search query .so that data1.php can filter out the result according to that.

data1.php:

This file receives the data params from the ajax1.php and query database and sends the ajax data which is then printed on the index and search pages.We build sql query here accordingly that set params.This file serves both index.php and search.php as  the above file.

[separator /]

Paginate Search Results using Jquery Ajax Pagination :: Styling:-

Now Guys lets take a look at Style sheet which give a good look to our Ajax search pagination and main ajax pagination.

Style.css-Styling the Ajax Search pagination

After doing all these steps out paginator will looks like this:

Jquery ajax pagination

Ajax paginator

Well That is All about the paginating search results with the ajax pagination .You can see the ajax search pagination demo at the link given below:

[separator /]

[jbutton icon=”globe” newpage=”yes” link=”http://demo.designaeon.info/ajaxpaginator-search/” size=”xlarge”]LIVE DEMO[/jbutton] [jbutton icon=”download” link=”http://download.designaeon.info/ajaxpaginator-search.rar” size=”xlarge”]DOWNLOAD EXAMPLE[/jbutton]

Tnx for visiting designaeon and keep visiting .Hope you loved our content.

[separator /]

Tags : , , , ,

5 Replies

  1. SB says:

    how to make the search into keyup, then automatically it will search?

    Thanks for this nice article,and thanks for your help.

    I figure it out already on how this works,and modify to my prefered coding, but i find in hard on how to implement the keyup search.

    can you help me? please?

    Thank you in advance sir.

    🙂

  2. Ramandeep Singh says:

    You should see this article,,,,
    http://www.designaeon.com/google-like-suggest-search/
    this is Suggestive Search this also perform search on keyup,,,,See that code then you would able to make your custom search

  3. cline lin says:

    How to add next,prev,first and last?

  4. taha says:

    hi thank you for this beautiful script i need just databas of this script plz

  5. Daniel Sarrazin says:

    I have an error on the scrip: Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /homepages/36/d301481160/htdocs/asaraw/php-pagination/ajax/libs/db.class.php on line 3. I don’t know what it does mean since this is the file from the Download.

    Thanks a lot guy.
    Please answer fast

Leave a Reply

Want to join the discussion ? Feel Free to contribute !