Javascript pagination - 自动切换时间间隔

Question

我有一个监视器，在表格中显示一些信息。我希望当表格太大而无法显示在屏幕上时，页面会显示“第 1/2 页”，然后在两个页面之间自动切换，比如说每 10 秒一次。

我试过搜索，似乎有很多创建分页的解决方案。但是，我一直无法找到描述自动切换的解决方案。

如果有人知道如何实现这一点，我将不胜感激。

某种自动滚动也很有趣。

最佳

Answer 1

你可以尝试这样的事情:

var tableData = [{id:1,first_name:"Zechariah"},
{id:2,first_name:"Ivett"},
{id:3,first_name:"Tremayne"},
{id:4,first_name:"Thibaud"},
{id:5,first_name:"Patrica"},
{id:6,first_name:"Carmina"},
{id:7,first_name:"Feliks"},
{id:8,first_name:"Beryle"},
{id:9,first_name:"Blondy"},
{id:10,first_name:"Humbert"},
{id:11,first_name:"Maighdiln"},
{id:12,first_name:"Beret"},
{id:13,first_name:"Eugenio"},
{id:14,first_name:"Kellen"},
{id:15,first_name:"Urson"},
{id:16,first_name:"Huntley"},
{id:17,first_name:"Iolanthe"},
{id:18,first_name:"Bernardo"},
{id:19,first_name:"Park"},
{id:20,first_name:"Ame"}];

var maxItems = 5;
var table = document.getElementsByTagName('tbody')[0];
var tableContainer = document.getElementById('table-container');
var activePage = 1;
var totalPages = Math.ceil(tableData.length / maxItems);
var myInterval;

// insert left arrow
var leftArrow = document.createElement('BUTTON');
var leftArrowContent = document.createTextNode('PREV');
leftArrow.appendChild(leftArrowContent);
tableContainer.appendChild(leftArrow);
leftArrow.addEventListener('click', function(){
  // check if we got to the last page
  if (activePage === 1) {
    activePage = totalPages;
  } else {
    activePage--;
  }

  insertTable();
});

// insert right arrow
var rightArrow = document.createElement('BUTTON');
var rightArrowContent = document.createTextNode('NEXT');
rightArrow.appendChild(rightArrowContent);
tableContainer.appendChild(rightArrow);
rightArrow.addEventListener('click', function(){
  // check if we got to the last page
  if (activePage === totalPages) {
    activePage = 1;
  } else {
    activePage++;
  }

  insertTable();

  
  clearInterval(myInterval);
  myInterval = setInterval(function(){
    rightArrow.click();
  }, 10000);
});

// insert page counter
var pageCounter = document.createElement('SPAN');
tableContainer.appendChild(pageCounter);

// automate the switch interval
myInterval = setInterval(function(){
  rightArrow.click();
}, 10000);

function insertTable() {
	var slicedData = tableData.slice((activePage - 1) * maxItems, activePage * maxItems);

	// empty the previous table
	table.innerHTML = '';

	// insert tr/td's
	for (var index = 0; index < slicedData.length; index++) {
		var tableTr = document.createElement('TR'); 
		table.appendChild(tableTr);

		for (var key in slicedData[index]) {
			var tableTd = document.createElement('TD');
			var tdContent = document.createTextNode(slicedData[index][key]);
			tableTd.appendChild(tdContent)
			tableTr.appendChild(tableTd);
		}
	}

	// update page counter content
	var pageCounterContent = document.createTextNode('Page ' + activePage + '/' + totalPages);
	pageCounter.innerHTML = '';
	pageCounter.appendChild(pageCounterContent);
}

insertTable(tableData);

td {
	border: 1px solid grey;
	padding: 3px;
}

<div id="table-container">
      <table>
        <tbody>

        </tbody>
      </table>
    </div>
    </table>