从数据库 (PHP MySQL) 中搜索和显示结果不适合 html 中的表格

Question

my code is working as I would like, the principle is to do a search in the table and according to what the user inputs, I will show the attributes in the already designed table in html page.我的代码按我的意愿工作，原理是在表格中进行搜索，根据用户输入的内容，我将在 html 页面中显示已经设计好的表格中的属性。 To better understanding, I'll put a picture of the output of my search.为了更好地理解，我将放一张搜索结果的图片。

output of the search搜索的输出

since this code has printf I have no idea what is suitable to output the data into my table, i have 12 attributes selected and I am using ajax and javascript因为这段代码有 printf 我不知道什么适合将数据输出到我的表中，我选择了 12 个属性，我正在使用 ajax 和 javascript

index.html (just part of that) index.html（只是其中的一部分）

<br><br>
<!-- Search box. -->
    <form method="post" action="index.php">
    <input type="text" id="search" name="search" required placeholder="Search for an item" /><input type="submit" value="LOAD"/>
    <br></form>

    <b>Ex: </b><i>Bread, Milk, Egg, etc or SKU</i>
    <br />
    <!-- Suggestions will be displayed in below div. -->
    <div id="display"></div>


<table id="itemsTable"> <tr>    <th>Quantity</th> 
                                <th>Item</th> 
                                <th>SKU</th> 
                                <th>Item Name</th> 
                                <th>Item Price</th> 
                                <th>Subtotal</th> 
                                <th>Cartons Scanned</th> 
                                <th>Individually Scanned</th> 
                                <th>Current Inventory</th> 
                                <th>Location Selected</th> 
                                <th>Image</th> 
                                <th>Edit</th>
                        </tr><tr><td>
              <?php
    if (isset($_POST['search'])) {
      // SEARCH FOR ITEM NAME
      require "2-search.php";

      // DISPLAY RESULTS
      if (count($results) > 0) {
        foreach ($results as $r) {
          printf("<div>%s - %s - %s - %s - %s - %s - %s - %s - %s - %s - %s- %s</div>", $r['quantity'], $r['item'], $r['sku'], $r['item_name'], $r['item_price'], $r['subtotal'], $r['cartons_scanned'], $r['ind_scanned'], $r['cur_inventory'], $r['location_sel'], $r['image'], $r['edit']);
        }
      } else {
        echo "No results found";
      }
    }
    ?>
           </td></tr></table> 
<br><br><br>

2-search.php 2-search.php

<?php
// (1) DATABASE CONFIG
// ! CHANGE THESE TO YOUR OWN !
define('DB_HOST', 'localhost');
define('DB_NAME', 'create_order_db');
define('DB_CHARSET', 'utf8');
define('DB_USER', 'root');
define('DB_PASSWORD', '');

// (2) CONNECT TO DATABASE
try {
  $pdo = new PDO(
    "mysql:host=" . DB_HOST . ";charset=" . DB_CHARSET . ";dbname=" . DB_NAME,
    DB_USER, DB_PASSWORD, [ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES => false ]
  );
} catch (Exception $ex) {
  die($ex->getMessage());
}

// (3) SEARCH
$stmt = $pdo->prepare("SELECT quantity,item,sku,item_name,item_price,subtotal,cartons_scanned,ind_scanned,cur_inventory,location_sel,image,edit FROM `item_new` WHERE `item_name` LIKE ? OR `sku` LIKE ?");
$stmt->execute(["%" . $_POST['search'] . "%", "%" . $_POST['search'] . "%"]);
$results = $stmt->fetchAll();
if (isset($_POST['ajax'])) { echo json_encode($results); }

3-ajax-search 3-ajax-搜索

<!DOCTYPE html>
<html>
  <head>
    <title>
      AJAX Search Example
    </title>
    <script>
      function fetch() {
        // GET SEARCH TERM
        var data = new FormData();
        data.append('search', document.getElementById("search").value);
        data.append('ajax', 1);

        // AJAX SEARCH REQUEST
        var xhr = new XMLHttpRequest();
        xhr.open('POST', "2-search.php", true);
        xhr.onload = function () {
          if (this.status==200) {
            var results = JSON.parse(this.response),
                wrapper = document.getElementById("results");
            wrapper.innerHTML = "";
            if (results.length > 0) {
              for(var res of results) {
                var line = document.createElement("div");
                wrapper.appendChild(line);
                line.innerHTML = res['quantity'] + " - " + res['item'] + " - " + res['sku'] + " - " + res['item_name'] + " - " + res['item_price'] + " - " + res['subtotal'] + " - " + res['cartons_scanned'] + " - " + res['ind_scanned'] + " - " + res['cur_inventory'] + " - " + res['location_sel'] + " - " + res['image'] + " - " + res['edit'];
                wrapper.appendChild(line);
              }
            } else {
              wrapper.innerHTML = "No results found";
            }
          } else {
            alert("ERROR LOADING FILE!");
          }
        };
        xhr.send(data);
        return false;
      }
    </script>
  </head>
  <body>
    <!-- [SEARCH FORM] -->
    <form onsubmit="return fetch();">
      <h1>SEARCH FOR USERS</h1>
      <input type="text" id="search" required/>
      <input type="submit" value="Search"/>
    </form>

    <!-- [SEARCH RESULTS] -->
    <div id="results"></div>
  </body>
</html>

Answer 1

Thank you for the comments, thankfully to @simone I was able to answer my own question.感谢您的评论，感谢@simone 我能够回答我自己的问题。

<table id="itemsTable"> <tr>    <th>Quantity</th> 
                                <th>Item</th> 
                                <th>SKU</th> 
                                <th>Item Name</th> 
                                <th>Item Price</th> 
                                <th>Subtotal</th> 
                                <th>Cartons Scanned</th> 
                                <th>Individually Scanned</th> 
                                <th>Current Inventory</th> 
                                <th>Location Selected</th> 
                                <th>Image</th> 
                                <th>Edit</th>
                        </tr>
              <?php
    if (isset($_POST['search'])) {
      // SEARCH FOR ITEM NAME
      require "2-search.php";

      // DISPLAY RESULTS
      if (count($results) > 0) {
        foreach ($results as $r) {
          echo "<tr>";
          echo "<td>" . $r['quantity'] . "</td>";
          echo "<td>" . $r['item'] . "</td>";
          echo "<td>" . $r['sku'] . "</td>";
          echo "<td>" . $r['item_name'] . "</td>";
          echo "<td>" . $r['item_price'] . "</td>";
          echo "<td>" . $r['subtotal'] . "</td>";
          echo "<td>" . $r['cartons_scanned'] . "</td>";
          echo "<td>" . $r['ind_scanned'] . "</td>";
          echo "<td>" . $r['cur_inventory'] . "</td>";
          echo "<td>" . $r['location_sel'] . "</td>";
          echo "<td>" . $r['image'] . "</td>";
          echo "<td>" . $r['edit'] . "</td>";
          echo "</tr>";
        }
      } else {
        echo "No results found";
      }
    }
    ?>
           </table>

从数据库 (PHP MySQL) 中搜索和显示结果不适合 html 中的表格

问题描述

1 个解决方案

解决方案1
0 2020-09-21 23:34:32

从数据库 (PHP MySQL) 中搜索和显示结果不适合 html 中的表格

问题描述

1 个解决方案

解决方案1 0 2020-09-21 23:34:32

解决方案1
0 2020-09-21 23:34:32