如何將使用基本 javascript 的分頁引入通過 XMLhttp 請求檢索到的 JSON 數據？

Question

我正在使用 XMLHttp 請求檢索 JSON 數據，並將它們放在一個表中。 我想引入分頁，這樣每個頁面將僅使用 javascript 的最基本知識僅顯示 5 組數據。我嘗試使用無序列表，然后使用 onclick，我嘗試使用按鈕，但我沒有得到想要的結果。 我對此真的很陌生，而且我沒有想法。 請提供一些關於如何實現所需的 output 的見解。

var request = new XMLHttpRequest();
request.open('GET', 'https://raw.githubusercontent.com/Rajavasanthan/jsondata/master/pagenation.json', true);

request.send();

request.onload = function() {
  var data = JSON.parse(request.response);
  console.log(data);

  var table = document.createElement('table');
  table.setAttribute('class', 'table');
  var thead = document.createElement('thead');
  thead.setAttribute('class', 'thead-dark')
  var tr = document.createElement('tr');
  var tbody = document.createElement('tbody');


  var th1 = document.createElement('th')
  th1.innerHTML = 'id'
  var th2 = document.createElement('th');
  th2.innerHTML = 'Name'
  var th3 = document.createElement('th');
  th3.innerHTML = 'Email';

  tr.append(th1, th2, th3);
  thead.append(tr);
  table.append(thead);

  var i = 0;
  for (let num = 1; num <= 20; num++) {
    for (let x = i * 5; x < ((i + 1) * 5); x++) {
      let k = data[x];
      foo(k.id, k.name, k.email, x);
    }
    i++
  }


  function foo(id, name, email, rownum) {
    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    var td3 = document.createElement('td');
    td1.innerHTML = id
    td2.innerHTML = name;
    td3.innerHTML = email;
    var tr = document.createElement('tr');
    if (rownum % 2 === 0) tr.setAttribute('style', 'background-color:#d3d3d3');
    tr.append(td1, td2, td3);
    tbody.append(tr);
    table.append(tbody);
  }
  document.body.append(table);

}

Answer 1

從您的 OP 來看，我不確定您遇到了什么問題。 您需要跟蹤表格結果，以便用戶向前和向后導航。 如何跟蹤結果取決於您，但我在下面創建了一個片段來展示示例。 我假設您的數據結構為對象數組。 這個例子應該讓你開始。

基本上，代碼通過將索引保存在表的數據屬性中來跟蹤顯示了哪些記錄。 然后，當用戶發送導航頁面的命令時，代碼將使用這些索引號來檢索下一組或上一組記錄以顯示在表上。

 const table = document.querySelector('table'); const theadRow = table.querySelector('thead tr') const tbody = table.querySelector('tbody') const navigation = document.querySelector('.navigation'); const myDataArray = [{ id: '001', name: "bob", email: 'nothing@aol.com' }, { id: '002', name: "susy", email: 'nothing@aol.com' }, { id: '003', name: "jim", email: 'nothing@aol.com' }, { id: '004', name: "anny", email: 'nothing@aol.com' }, { id: '005', name: "greg", email: 'nothing@aol.com' }, { id: '006', name: "pepe", email: 'nothing@aol.com' }, { id: '007', name: "mickey", email: 'nothing@aol.com' }, ] const paginationConfig = { resultsPerPage: 2, } // set default page start table.dataset.recordStart = 0 table.dataset.recordEnd = paginationConfig.resultsPerPage - 1 displayDefaultTablePage(myDataArray) function displayDefaultTablePage(data) { let currentRecordStart = parseInt(table.dataset.recordStart) let currentRecordEnd = parseInt(table.dataset.recordEnd) let headerLabels = Object.keys(data[0]) for (let i = 0; i < headerLabels.length; i++) { let th = document.createElement('th') th.textContent = headerLabels[i] theadRow.append(th) } let recordsToDisplay = data.slice(currentRecordStart, currentRecordEnd + 1) createTbodyCells(recordsToDisplay) } // listen for user commands navigation.addEventListener('click', (e) => { if (e.target.matches('.next')) { changePage('next') } else { changePage('prev') } }) // determine direction and initialize the page change function changePage(direction) { let currentRecordStart = parseInt(table.dataset.recordStart) let currentRecordEnd = parseInt(table.dataset.recordEnd) if (direction === 'next') { if(currentRecordEnd+1>myDataArray.length){ return } let newStart = currentRecordEnd + 1 let newEnd = newStart + paginationConfig.resultsPerPage - 1 table.dataset.recordStart = newStart table.dataset.recordEnd = newEnd let recordsToDisplay = myDataArray.slice(newStart, newEnd + 1) createTbodyCells(recordsToDisplay) } else if (direction === 'prev') { if(currentRecordStart==0){ return } let newEnd = currentRecordStart - 1 let newStart = newEnd - paginationConfig.resultsPerPage+1 table.dataset.recordStart = newStart table.dataset.recordEnd = newEnd let recordsToDisplay = myDataArray.slice(newStart, newEnd + 1) createTbodyCells(recordsToDisplay) } else { return } } // add records to DOM function createTbodyCells(records) { tbody.textContent = '' for (let i = 0; i < records.length; i++) { let record = records[i] let tr = document.createElement('tr') for (const key in record) { if (Object.hasOwnProperty.call(record, key)) { let td = document.createElement('td') td.textContent = record[key] tr.append(td) } } tbody.append(tr) } }

 body { background-color: rgb(235, 235, 235); } th{ background-color: black; color: white; } td{ border: 1px solid black; padding: .5rem; } button{ border: none; padding: .5rem; background-color: rgb(13, 118, 179); color: white; }.container{ width: fit-content; margin: auto; }.navigation{ width: fit-content; margin: auto; }

 <div class="container"> <table data-record-start="0" data-record-end=""> <thead> <tr> </tr> </thead> <tbody> </tbody> </table> <div class="navigation"> <button class="prev">Prev</button> <button class="next">Next</button> </div> </div>

Answer 2

我假設你得到了一組對象。

這是一個分頁 function（vanilla js），它將數組轉換為 -> arrays 的數組

const paginate = (data) => {
    const DATA_PER_PAGE = 5;
    const TOTAL_USER_COUNT = data.length;
    const PAGE_COUNT = Math.ceil(TOTAL_USER_COUNT / DATA_PER_PAGE);

    const paginatedData = Array.from({ length: PAGE_COUNT }, (_, index) => {
        const start = index * DATA_PER_PAGE;
        return data.slice(start, start + DATA_PER_PAGE);
    });

    return paginatedData;
};

現在，這個數組的長度就是“頁數”。 使用此長度，您可以動態生成按鈕。 添加事件偵聽器（我將使用事件委托和索引（或者可能是數據 ID））並訪問您需要的數據（這意味着如果單擊的按鈕是索引 0，則訪問此數組數組的第 0 個索引）。