PHP Sorting with jQuery and Ajax

Hi, today i am going to tell you about how to develop a dynamic sorting system using php and ajax it is very common and regular concept in product based applications, i have developed this sorting system by using php, mysql, jquery and ajax

PHP

connect this file to database and take the select menu and give a class and id name sort and write the query to fetch the categories from gallery_cat table and loop the records inside the option tag, now write the query to fetch the all records from gallery table and loop them inside the UL and LI tag, now take the div for display the loader image while sorting the products or items and name it loader 

<div class="lessoncup">

<select name="" class="sort" id="sort">
  
<option value="0">All</option>

  
<?php

$gallerycat=mysql_query("select * from gallery_cat order by cat_name asc");

while($fullgc=mysql_fetch_array($gallerycat)){

?>

<option value="<?php echo $fullgc['gcat_id']?>">

<?php echo $fullgc['cat_name']?></option>
  
  <?php }?>

</select>

<div id="loader"></div>

<ul class="img">

<?php

$gallery=mysql_query("select * from gallerys where status=1 order by gid desc");

while($fullg=mysql_fetch_array($gallery)){

?>

<li class="tbig">

<img src="gallery/<?php echo $fullg['image']?>" alt="" />

</li>

<?php }?>

</ul>

</div>

JAVASCRIPT

here write the change function to select menu #sort as a selector and inside the function just take the values of select options by using val() method, store the values in datasend variable now write the ajax function and inside the function just send the variable to sortgallery.php file as a request and get the response in success function and append the data to #dump DIV and hide the loader image

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $('#sort').change(function(){
  
  var val=$(this).val();
  
  var datasend = 'cat='+val;
  
  $('.img').hide();

  $("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle">&nbsp;Loading Images');
   
    
   $.ajax({
    
    type: "POST",
    url: "sortgallery.php",
    data: datasend,
    cache: false,
    success: function(msg){
     
     $("#dump").append(msg);
     $('#loader').hide();
     
     }
     
    });

  
 });
 
});
</script>

sortgallery.php

here connect this file to database now i write the condition here for if the user select ALL from select menu i just retrieving all records from gallerys table, and in else write the query to fetch the records from gallerys table using where if the gcat_id=$cat based on this the sorting data will display in VIEW page

<ul class="img">

<?php

extract($_REQUEST);

include("db.php");

if($cat=='0'){
 
$gallery=mysql_query("select * from gallerys order by gid desc");

}else{
 
$gallery=mysql_query("select * from gallerys where gcat_id='$cat' order by gid desc");

}

while($fullg=mysql_fetch_array($gallery)){
 
?>
<li class="tbig">

<img src="gallery/<?php echo $fullg['image']?>" alt="" />

</li>

<?php }?>

</ul>

Database

take two table one is for store the categories and one is for to store the products

--
-- Table structure for table `gallery_cat`
--

CREATE TABLE IF NOT EXISTS `gallery_cat` (
  `gcat_id` int(11) NOT NULL AUTO_INCREMENT,
  `cat_name` varchar(255) NOT NULL,
  PRIMARY KEY (`gcat_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

--
-- 

CREATE TABLE IF NOT EXISTS `gallerys` (
  `gid` int(11) NOT NULL AUTO_INCREMENT,
  `gcat_id` int(11) NOT NULL,
  `image` varchar(255) NOT NULL,
  PRIMARY KEY (`gid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

--
--

Live Demo   Download Script