点击按钮无刷新无AJAX切换展示users/stores数据库表实现方案

Absolutely! You can pull this off entirely without AJAX or page refreshes—here's a step-by-step implementation tailored to your setup:

Step 1: Update Your HTML with Pre-Rendered Tables #

First, add both your users and stores tables directly inside the table_container (we’ll hide them by default with CSS later). Your server will populate these tables with database data when the page first loads:

<html>
<head>
  <!-- We'll add CSS here next -->
</head>
<body>
  <div class="btn_container">
    <div class="buttons active" id="btn_products">
      <i class="fas fa-store"></i>
      <h1 class="products_text">Total Products</h1>
    </div>
    <div class="buttons" id="btn_users">
      <i class="fas fa-users"></i>
      <h1 class="users_text">Total Users</h1>
    </div>
    <div class="buttons">btn3</div>
  </div>
  <div class="table_container">
    <!-- Stores/Products Table (visible by default) -->
    <table id="stores_table" class="active-table">
      <thead>
        <tr>
          <th>Store ID</th>
          <th>Store Name</th>
          <th>Location</th>
        </tr>
      </thead>
      <tbody>
        <!-- Replace with your actual stores data from the database -->
        <tr>
          <td>1</td>
          <td>Main Street Market</td>
          <td>New York</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Cozy Corner Shop</td>
          <td>London</td>
        </tr>
      </tbody>
    </table>

    <!-- Users Table (hidden by default) -->
    <table id="users_table">
      <thead>
        <tr>
          <th>User ID</th>
          <th>Username</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <!-- Replace with your actual users data from the database -->
        <tr>
          <td>1</td>
          <td>john_doe</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>2</td>
          <td>jane_smith</td>
          <td>jane@example.com</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- We'll add JavaScript here next -->
</body>
</html>

Step 2: Add CSS for Visibility & Styling #

Drop this CSS in the <head> section to handle hiding/showing tables and highlight active buttons:

/* Hide all tables by default */
.table_container table {
  display: none;
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

/* Show the active table */
.table_container table.active-table {
  display: table;
}

/* Button base styling */
.btn_container .buttons {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: inline-block;
  margin-right: 10px;
  background-color: #f5f5f5;
  transition: background-color 0.2s;
}

/* Highlight active button */
.btn_container .buttons.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

/* Optional table styling for readability */
table th, table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

table th {
  background-color: #f2f2f2;
}

Step 3: Add JavaScript for Button Toggling #

Add this script right before the closing </body> tag to switch tables when buttons are clicked:

// Grab all necessary elements
const productsBtn = document.getElementById('btn_products');
const usersBtn = document.getElementById('btn_users');
const storesTable = document.getElementById('stores_table');
const usersTable = document.getElementById('users_table');

// Reusable function to switch active table and button
function switchTable(activeBtn, activeTable, inactiveBtn, inactiveTable) {
  // Update button states
  activeBtn.classList.add('active');
  inactiveBtn.classList.remove('active');
  
  // Update table visibility
  activeTable.classList.add('active-table');
  inactiveTable.classList.remove('active-table');
}

// Attach click events to buttons
productsBtn.addEventListener('click', () => {
  switchTable(productsBtn, storesTable, usersBtn, usersTable);
});

usersBtn.addEventListener('click', () => {
  switchTable(usersBtn, usersTable, productsBtn, storesTable);
});

Why This Works #

• Pre-Rendered Data: Both tables are loaded with the initial page (your server injects the users and stores data directly into the HTML).
• CSS Visibility Control: We use display: none to hide tables by default, then toggle a class to show the selected table.
• Client-Side Toggling: JavaScript handles button clicks to switch which table and button are active—no network requests or page reloads required.

This approach is fast, lightweight, and exactly what you’re looking for!

内容的提问来源于stack exchange，提问作者Sanju