JavaScript分页：实现自动切换时间间隔功能

Hey Niklas, let’s tackle your table display needs—auto-paging with a clear page indicator, plus auto-scrolling alternatives. These are perfect for dashboard monitors, so I’ll walk you through actionable, code-ready ideas.

Part 1: Auto-Paging with "Page X/Y" Indicator #

This approach splits your table into discrete pages, shows a page counter, and auto-swaps pages every 10 seconds.

Core Steps: #

• Split your data: Divide your table rows into chunks that fit your screen (you can either calculate the visible row count dynamically or set a fixed number like 15 rows per page)
• Render only the current page: Hide all rows except those in the active page
• Add a page indicator: Display current page number and total pages
• Auto-switch with a timer: Use setInterval to cycle through pages, looping back to the first page after the last one

Example Code: #

HTML

<div class="table-container">
  <table id="data-table">
    <thead>
      <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
    </thead>
    <tbody id="table-body">
      <!-- All your table rows will be inserted here -->
    </tbody>
  </table>
  <div class="page-indicator" id="page-indicator">Page 1/1</div>
</div>

CSS

.table-container {
  width: 100%;
  height: 90vh; /* Match your monitor's display area */
  overflow: hidden; /* Hide rows outside the container */
}

#data-table {
  width: 100%;
  border-collapse: collapse;
}

.page-indicator {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 8px 16px;
  background: rgba(0,0,0,0.7);
  color: white;
  border-radius: 4px;
  font-size: 14px;
}

JavaScript

// Replace this with your actual table data
const tableData = Array.from({length: 50}, (_, i) => ({
  col1: `Row ${i+1}`,
  col2: `Data ${Math.floor(Math.random() * 100)}`,
  col3: `Status ${Math.random() > 0.5 ? 'Active' : 'Inactive'}`
}));

const rowsPerPage = 15; // Adjust based on your screen's visible row count
const tableBody = document.getElementById('table-body');
const pageIndicator = document.getElementById('page-indicator');
let currentPage = 1;
const totalPages = Math.ceil(tableData.length / rowsPerPage);

// Render the current page of rows
function renderPage(pageNum) {
  tableBody.innerHTML = '';
  const startIdx = (pageNum - 1) * rowsPerPage;
  const endIdx = startIdx + rowsPerPage;
  const pageRows = tableData.slice(startIdx, endIdx);
  
  pageRows.forEach(row => {
    const tr = document.createElement('tr');
    tr.innerHTML = `<td>${row.col1}</td><td>${row.col2}</td><td>${row.col3}</td>`;
    tableBody.appendChild(tr);
  });
  
  // Update page counter
  pageIndicator.textContent = `Page ${pageNum}/${totalPages}`;
}

// Auto-switch pages every 10 seconds
setInterval(() => {
  currentPage = currentPage === totalPages ? 1 : currentPage + 1;
  renderPage(currentPage);
}, 10000);

// Initial render on page load
renderPage(currentPage);

Pro Tips: #

• Dynamic row count: Instead of fixed rowsPerPage, calculate how many rows fit in your container by dividing the container height by the height of a single table row
• Pause/Resume: Add a button to clear the interval and restart it if you need to pause auto-paging temporarily
• Window resize handling: Listen for resize events to recalculate rowsPerPage and re-render the current page

Part 2: Auto-Scrolling Alternative #

If you prefer a continuous flow instead of discrete pages, here are two practical approaches:

Option 1: Discrete Section Scrolling (Like Paging but Smooth) #

This scrolls the table to the next "screenful" of content every 10 seconds:

const tableContainer = document.querySelector('.table-container');
const scrollHeight = tableContainer.clientHeight;

setInterval(() => {
  tableContainer.scrollTop += scrollHeight;
  // Loop back to top when reaching the bottom
  if (tableContainer.scrollTop >= tableContainer.scrollHeight - scrollHeight) {
    tableContainer.scrollTop = 0;
  }
}, 10000);

Option 2: Continuous Slow Scroll #

For a smooth, endless scroll (great for real-time updating tables):

const tableContainer = document.querySelector('.table-container');
let scrollSpeed = 2; // Pixels per frame

const scrollInterval = setInterval(() => {
  tableContainer.scrollTop += scrollSpeed;
  // Reset to top when reaching the bottom
  if (tableContainer.scrollTop >= tableContainer.scrollHeight - tableContainer.clientHeight) {
    tableContainer.scrollTop = 0;
  }
}, 30); // Adjust interval for smoother/rougher scroll

// To pause: clearInterval(scrollInterval);

Pro Tips for Scrolling: #

• Smooth transitions: Use scrollTo({top: newPosition, behavior: 'smooth'}) for nicer animated scrolling (note: limited support in older browsers)
• Avoid jank: Replace setInterval with requestAnimationFrame for buttery-smooth continuous scrolling
• Dynamic content: If your table updates with new rows, adjust the scroll logic to account for increased scroll height

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