Javascript分頁 - 自動切換時間間隔

Question

我有一個監視器在表格中顯示一些信息。 我希望當桌子太大而不適合屏幕時，頁面會說“Page 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>