title: How to apply sorting and filtering using Ajax Json PHP & MySQL
body: <p>Hi i am a beginner i am working on software site. i have built all the pages and layout for the site that was the easy part done using HTML CSS AND JAVASCRIPT alone, only thing left is to make main categories pages for different software which is tough for me.</p>
  
  <p>i want to to add <strong>sorting</strong> option on <strong>category</strong> pages like this <a href="http://download.cnet.com/windows/antivirus-software/?tag=rb_content;main" rel="nofollow">(See Here)</a>
  where user shall be <strong>able to sort software according to date, name, date added etc</strong>. and also be able to control  <strong>max number of software to display like 20, 30, 100 etc</strong>.</p>
  
  <p>On my HTML Page i have these <strong>div's</strong> in which i want to display data (different softwares)
  from <strong>MySQL database</strong> "security_software" (it is a testing database) from <strong>table</strong> "internet_security" (it is a testing table)</p>
  
  <p><strong>HTML Div's</strong></p>
  
  <blockquote>
  <pre><code>  &lt;div class="category-container"&gt;
      &lt;div class="category-image"&gt;&lt;/div&gt;
      &lt;div class="category-desc"&gt;&lt;a href="#"&gt;#&lt;/a&gt;&lt;p&gt;text&lt;/p&gt;&lt;/div&gt;
      &lt;div class="rating5" &gt;Editors' rating: &lt;/div&gt;
      &lt;div class="category-download-btn"&gt;&lt;a href="#"&gt;Download&lt;/a&gt;&lt;/div&gt;
      &lt;div class="category-buy-btn"&gt;&lt;a href="#"&gt;Buy&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  </blockquote>
  
  <p>After Some research i have got a solution to use JSON AJAX PHP &amp;MySQL</p>
  
  <p><strong>JAVASCRIPT Code i have</strong></p>
  
  <pre><code>&lt;head&gt;    
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $.ajax({
      url: 'ajax.php',
      dataType: 'json',
      success: function(response){
          data = '';
          $.each(response,function(i,val){
            data = '&lt;div class="category-image"&gt;'+val.image+'&lt;/div&gt;'+
          '&lt;div class="category-link"&gt;&lt;a href="#"&gt;'+val.id+'&lt;/a&gt;&lt;/div&gt;'+
          '&lt;div class="category-desc"&gt;&lt;p&gt;'+val.description+'&lt;/p&gt; &lt;/div&gt;'+
          '&lt;div class="rating5" &gt;'+val.rating+'&lt;/div&gt;'+ 
          '&lt;div class="category-download-btn"&gt;&lt;a href="'+val.download+'"&gt;Download&lt;/a&gt;&lt;/div&gt;'+ 
          '&lt;div class="category-buy-btn"&gt;&lt;a href="'+val.buy+'"&gt;Buy&lt;/a&gt;&lt;/div&gt;';
          $('&lt;div&gt;').attr('id',i).html(data).appendTo('#response');
      });
  
      }
   });
  &lt;/script&gt;
  &lt;/head&gt;
   &lt;body&gt;
  &lt;div id='response'&gt;&lt;/div&gt;   
   &lt;/body&gt;
  </code></pre>
  
  <p><strong>PHP Code i have</strong></p>
  
  <pre><code>&lt;?php
  $q=$_GET["q"]; 
  
  $con = mysql_connect('localhost', 'root', '');
  if (!$con)
    {
    die('Could not connect: ' . mysql_error());
    }
  
  mysql_select_db("security_software", $con);
  
  $sql="SELECT * FROM internet_security ORDER by `".$q."` DESC" ;
  
  
  $result = mysql_query($sql);
  $response = array();
  $i=0;
  while($row = mysql_fetch_array($result))
    {
    $response[$i]['id']           =$row['id'];
    $response[$i]['title']        = $row['title'];
    $response[$i]['image']        = $row['image'];
    $response[$i]['description']  = $row['description'];
    $response[$i]['rating']       = $row['rating'];
    $response[$i]['download']     = $row['download'];  
    $response[$i]['buy']          = $row['buy'];
    $i++;
    }
  mysql_close($con); 
  
  echo json_encode($response);
  ?&gt;
  </code></pre>
  
  <p><strong>Now it is not working at all as i dont have any place to attach these codes for (categories drop down) in javascript i have.</strong></p>
  
  <pre><code>&lt;form&gt;
  &lt;select name="users" onchange="showUser(this.value)"&gt;
  &lt;option value=""&gt;Select a person:&lt;/option&gt;
  &lt;option value="id"&gt;id&lt;/option&gt;
  &lt;option value="title"&gt;title&lt;/option&gt;
  &lt;option value="image"&gt;image&lt;/option&gt;
  &lt;option value="description"&gt;description&lt;/option&gt;
  &lt;option value="description"&gt;rating&lt;/option&gt;
  &lt;option value="download"&gt;download&lt;/option&gt;
  &lt;option value="buy"&gt;buy&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Please help me guys where can i attach these code and how to get it working, i am totally confused.</p>