Filtrer les résultats en utilisant php ou javascript

Question

Je suis nouveau dans le développement PHP, Smarty avec MySQL. Je voudrais une opinion d'expert sur ce qui suit, ou tout bon conseil fera l'affaire.

Je fait une index.php qui se connecte à la base de données (MySQL) aussi Smarty, lit mes données par requête et les affiche de mon dossier index.tpl. Idem pour mes produits, product.php se connecte à la base de données, fait une requête, et affiche mes produits sur la page product.tpl.

Pour mon index.php Je voudrais ajouter un filtre affichant le produit par prix de élevé à faible ou de faible à élevé.

Que proposez-vous:

me conseillez-vous utiliser Javascript pour le filtre ou tout simplement l'interroger la base de données pour chaque fois que cette valeur de sélection est sélectionnée?

Ou comment serait le meilleur moyen de le faire? Tous les conseils sur ce fera d'avance merci.

Ma base de données pour maintenant ont seulement 3 produits, je suis juste en train de tester.

.php

<?php 

$new = ['product_id','product_category','product_price','product_quantity','product_about','product_color']; 

//Database connection 
$db = mysqli_connect('xxx','xxx','xxx','xxx') or die('Error connecting to MySQL server.'); 

//access Smarty template engine 
require_once('Smarty-3.1.30/libs/Smarty.class.php'); 

$smarty = new Smarty(); 
$smarty->template_dir = 'views'; 
$smarty->compile_dir = 'tmp'; 


//query product page 
$query = "SELECT * FROM cs_shop"; 

if ($productPrice > 0) { 
    $query .= " WHERE `product_price` = ".$productPrice; 
} 


mysqli_query($db, $query) or die('Error querying database.'); 

$result = mysqli_query($db, $query); 

if (!empty($_GET['sort']) && $_GET['sort'] == 'PriceAsc') { 
    $result =" ORDER BY `product_price` ASC"; 
} 
if (!empty($_GET['sort']) && $_GET['sort'] == 'PriceDesc') { 
    $result =" ORDER BY `product_price` DESC"; 
} 




//query an array of products 
$rows = array(); 

//loop start 
while ($row = mysqli_fetch_array($result)) { 
    $rows[] = array(
     'product_id' => $row['product_id'], 
     'product_category' => $row['product_category'], 
     'product_price' => $row['product_price'], 
     'product_quantity' => $row['product_quantity'], 
     'product_about' => $row['product_about'], 
     'product_color' => $row['product_color'] 
    ); 
} 

//db collect data 
$smarty->assign('row', $rows); 
//template 
$smarty->display('index.tpl'); 

mysqli_close($db); 

?> 

tpl (ce qui est la boucle pour afficher-liste des produits)

<form method="get" name="sort"> 
    <select name="sort" id="sort"> 
       <option value=''>--Select--</option> 
       <option value='PriceAsc'>high to low</option> 
       <option value='PriceDesc'>low to high</option> 
    </select> 
    <input type="submit" value="Sort"/> 
    </form> 



<div class="test divider"> 
      {section name=prod loop=$row} 
       <div class="colm3"> 
        <div class="col3 r1"> 
         <div class="products-container"> 
          <h5>{$row[prod].product_name}</h5> 
          <a class="producy_img_link" href="#" > 
           <img src="{$row[prod].prod_img}" style="width:auto; height:255px;"> 
          </a> 
         </div> 
        </div> 

        <a href="#"> 
         <div class="block-right"> 
          <h6>{$row[prod].product_vintage}</h6> 
          <h5>{$row[prod].product_veriatel}</h5> 
          <div> 
           <span class="price">R {$row[prod].product_price}</span> 
          </div> 
         </div> 
        </a> 
       </div> 
       {/section} 
</div> 

Maintenant, chaque fois que je clique sur haut en bas, je veux que les produits à filtrer par prix de haut en bas, je pense qu'il y aurait un moyen facile d'utiliser une requête, mais je suis coincé avec cela.

Answer 1

Vous pouvez utiliser AJAX pour trier le tableau, donnez vos en-têtes de table name attribut et cliquez de la table d'en-tête obtenir l'attribut de nom de l'en-tête de table et de faire appel à votre AJAXPHP.

$('th').on('click', function() { 
 
    var name = $(this).attr('name'); 
 

 
    console.log('AJAX will sort by: ' + name); 
 
    // this is the AJAX call 
 
    // $.post('somephpgage.php', {sortby: name}, function (response) { 
 
    // $('#table-result').html(response); 
 
    // }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="table-result"> 
 
    <table style="width:100%"> 
 
     <thead> 
 
     <tr> 
 
      <th name="firstname">Firstname</th> 
 
      <th name="lastname">Lastname</th> 
 
      <th name="age">Age</th> 
 
     </tr> 
 
     </thead> 
 
     <tr> 
 
      <td>Jill</td> 
 
      <td>Smith</td> 
 
      <td>50</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Eve</td> 
 
      <td>Jackson</td> 
 
      <td>94</td> 
 
     </tr> 
 
    </table> 
 
</div>

Puis dans votre PHP

<?php 

    $new = ['product_id', 'product_category', 'product_price', 'product_quantity', 'product_about', 'product_color']; 

    //Database connection 
    $db = mysqli_connect('xxx', 'xxx', 'xxx', 'xxx') 
    or die('Error connecting to MySQL server.'); 

    //access Smarty template engine 
    require_once('Smarty-3.1.30/libs/Smarty.class.php'); 

    $smarty = new Smarty(); 
    $smarty->template_dir = 'views'; 
    $smarty->compile_dir = 'tmp'; 
    //query product page 
    $query = "SELECT * FROM cs_shop"; 


    if (!empty($_GET['sort']) && $_GET['sort'] == 'PriceAsc') { 
     $query = "SELECT * FROM cs_shop ORDER BY price ASC"; 
    } elseif (!empty($_GET['sort']) && $_GET['sort'] == 'PriceDesc') { 
     $query = "SELECT * FROM cs_shop ORDER BY price DESC"; 
    } 

    $result = mysqli_query($db, $query); 

    //query an array of products 
    $rows = array(); 

    //loop start 
    while ($row = mysqli_fetch_array($result)) { 
     $rows[] = array(
      'product_id' => $row['product_id'], 
      'product_category' => $row['product_category'], 
      'product_price' => $row['product_price'], 
      'product_quantity' => $row['product_quantity'], 
      'product_about' => $row['product_about'], 
      'product_color' => $row['product_color'] 
     ); 
    } 

    //db collect data 
    $smarty->assign('row', $rows); 
    //template 
    $smarty->display('index.tpl'); 

    mysqli_close($db); 

    ?> 

Utilisation d'AJAX ajouter un id="sort-ajax" à cette div <div class="test divider">

<select name="sort" id="sort"> 
    <option value=''>--Select--</option> 
    <option value='PriceAsc'>high to low</option> 
    <option value='PriceDesc'>low to high</option> 
</select> 

<!-- add this at the bottom of your page, just before </body> --> 
<script src="js/jquery.min.js"></script> 
<script> 
    $('#sort').on('change', function() { 
     $.post('sort.php', {sort: $(this).val()}, function (response) { 
      $('#sort-ajax').html(response); 
     }); 
    }) 
</script> 

Créer un nouveau fichier PHP appelé sort.php, nous allons vous envoyer un appel AJAX à cette page.

<?php 
//Database connection 
$db = mysqli_connect('xxx', 'xxx', 'xxx', 'xxx') 
or die('Error connecting to MySQL server.'); 

$query = "SELECT * FROM cs_shop"; 


if (!empty($_POST['sort']) && $_POST['sort'] == 'PriceAsc') { 
    $query = "SELECT * FROM cs_shop ORDER BY price ASC"; 
} elseif (!empty($_POST['sort']) && $_POST['sort'] == 'PriceDesc') { 
    $query = "SELECT * FROM cs_shop ORDER BY price DESC"; 
} 

$result = mysqli_query($db, $query); 


//loop start 
while ($row = mysqli_fetch_array($result)) : ?> 
    <div class="colm3"> 
     <div class="col3 r1"> 
      <div class="products-container"> 
       <h5><?= $row['product_name']; ?></h5> 
       <a class="producy_img_link" href="#"> 
        <img src="{$row[prod].prod_img}" style="width:auto; height:255px;"> 
       </a> 
      </div> 
     </div> 

     <a href="#"> 
      <div class="block-right"> 
       <h6><?= $row['product_vintage']; ?></h6> 
       <h5><?= $row['product_veriatel']; ?></h5> 
       <div> 
        <span class="price">R <?= $row['product_price']; ?></span> 
       </div> 
      </div> 
     </a> 
    </div> 

<?php endwhile; 
mysqli_close($db);