使用php或javascript过滤结果

1 回答

• 1

  您可以使用 AJAX 对表进行排序，为表头提供 name 属性，然后单击 Headers 表获取表头的name属性，并调用 AJAX 来调用 PHP .

  $('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>
  

  然后在你的 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);
  
      ?>
  

  Using AJAX 将 id="sort-ajax" 添加到此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>
  

  创建一个名为 sort.php 的新 PHP 文件，我们将把 AJAX 调用发送到此页面 .

  <?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);
  

  回复于 2024-04-25T14:22:10+08:00