带有分页的下一个和上一个按钮功能

Question

我想在我的分页中添加下一个和上一个按钮功能，这样我也可以通过它们移动页面。在我的代码中，我只设法显示下一页或上一页，并在点击时查看第二页的内容，但没有将按钮的选定编号从 1 移动到 2，如果有更多，则移动到下一页，依此类推。上一个也一样另外，如果我不能去 next/prev，我想禁用 next/prev 按钮。

请问有什么帮助吗？

这是我目前所拥有的：

window.onload = function(){

var data = {
  "headings": {
    "propBook": "Book",
    "propAuthor": "Author",
    "propYear": "Year",
  },
  "items": [{
      "fields": {
        "propBook": "The Great Gatsby",
        "propAuthor": "F Scott Fitzgerald",
        "propYear": "1925",
      },
      "button": {
        "name": "View book",
        "propURL": "https://google.com"
      }
    },
    {
      "fields": {
        "propBook": "The Grapes of Wrath",
        "propAuthor": "John Steinbeck",
        "propYear": "1939",
      },
      "button": {
        "name": "View book",
        "propURL": ""
      }
    },
    {
      "fields": {
        "propBook": "A Wild Sheep Chase",
        "propAuthor": "Haruki Murakami",
        "propYear": "1982",
      },
      "button": {
        "name": "View book",
        "propURL": "https://google.com"
      }
    }
  ]
}


const HEADINGS = data.headings;
const ITEMS = data.items;
const TABLE_WRAPPER = document.querySelector('.book-component .table-wrapper');
const TABLE = document.createElement('table');
TABLE.setAttribute('class', 'pagination');
  TABLE.setAttribute('data-pagecount', 2);
TABLE_WRAPPER.appendChild(TABLE);


for (const field in data) {
  const TABLE_ROW = document.createElement('tr');
  TABLE_ROW.setAttribute('id', 'myRow');

  if (field == 'headings') {
    for (const child in HEADINGS) {
      const HEADER_CELL = document.createElement('th');
      TABLE_ROW.appendChild(HEADER_CELL);
      HEADER_CELL.setAttribute('class', 'sort-cta');
      HEADER_CELL.innerText = HEADINGS[child];
      TABLE.appendChild(TABLE_ROW);
    }
  } else if (field == 'items') {
    for (const child in ITEMS) {
      const TABLE_ROW = document.createElement('tr');
      let item = ITEMS[child].fields;
      let btn = ITEMS[child].button;      

      for (const row in item) {
        const TABLE_DATA = document.createElement('td');
        TABLE_ROW.appendChild(TABLE_DATA);
        TABLE_DATA.innerText = item[row];
        TABLE.appendChild(TABLE_ROW);       
      }
      
      
      if (btn.propURL !== '') {
        let link = document.createElement('a');
        link.setAttribute('href', btn.propURL);
        link.innerHTML = btn.name;
        x = TABLE_ROW.insertCell(-1);
        x.appendChild(link);
      } else {
        let link = document.createElement('span');
        link.innerHTML = 'Reserved';
        x = TABLE_ROW.insertCell(-1);
        x.appendChild(link);
      }
    }
  }
}

  let perPage = 10;
  function genTables() {
    let tables = document.querySelectorAll('.pagination');
    tables.forEach((table) => {
      perPage = parseInt(table.dataset.pagecount);
      createFooters(table);
      createTableMeta(table);
      loadTable(table);
    });
  }
  // based on current page, only show the elements in that range
  function loadTable(table) {
    let startIndex = 0;
    if (table.querySelector('th')) startIndex = 1;
    const START = parseInt(table.dataset.currentpage) * table.dataset.pagecount + startIndex;
    const END = START + parseInt(table.dataset.pagecount);
    const TABLE_ROWS = table.rows;
    for (var x = startIndex; x < TABLE_ROWS.length; x++) {
      if (x < START || x >= END) TABLE_ROWS[x].classList.add('inactive');
      else TABLE_ROWS[x].classList.remove('inactive');
    }
  }

  function createTableMeta(table) {
    table.dataset.currentpage = '0';
  }

  function createFooters(table) {
    const COUTING_WRAPPER = document.createElement('div');
    COUTING_WRAPPER.setAttribute('class', 'counting-wrapper');
    const COUNTING_MSG = document.createElement('p');
    COUTING_WRAPPER.appendChild(COUNTING_MSG);
    let TABLE_WRAP = document.querySelector('.table-wrapper');
    TABLE_WRAP.appendChild(COUTING_WRAPPER);

    let hasHeader = false;
    if (table.querySelector('th')) hasHeader = true;
    let ROWS = table.rows.length;
    if (hasHeader) ROWS = ROWS - 1;
    let NUM_PAGES = ROWS / perPage;
    let pager = document.createElement('div');
    // add an extra page
    if (NUM_PAGES % 1 > 0) NUM_PAGES = Math.floor(NUM_PAGES) + 1;
    pager.className = 'pager';
    let nextPage = document.createElement('button');
    nextPage.innerHTML = 'next';
    nextPage.className = 'item';
    let prevPage = document.createElement('button');
    prevPage.innerHTML = 'prev';
    prevPage.className = 'item';
    pager.appendChild(prevPage);
    pager.appendChild(nextPage);


    nextPage.addEventListener('click', () => {
      table.dataset.currentpage = parseInt(table.dataset.currentpage) + 1;
      loadTable(table);
    });

    prevPage.addEventListener('click', () => {
      table.dataset.currentpage = parseInt(table.dataset.currentpage) - 1;
      loadTable(table);
    })

    for (var i = 0; i < NUM_PAGES; i++) {
      var page = document.createElement('button');
      page.innerHTML = i + 1;
      page.className = 'pager-item';
      page.dataset.index = i;
      if (i == 0) page.classList.add('selected');
      

      page.addEventListener('click', function () {
        var items = pager.querySelectorAll('.pager-item');
        for (var x = 0; x < items.length; x++) {
          items[x].classList.remove('selected');
        }
        this.classList.add('selected');
        table.dataset.currentpage = this.dataset.index;
        loadTable(table);

       
      });
      pager.appendChild(page);
    }

    // insert page at the top of the table
    table.parentNode.insertBefore(pager, table);
  }
  genTables();


};

tr.inactive {
  display: none;
}

.table-wrapper {
  display: flex;
  flex-direction: column-reverse;
}

.pager {
  display: flex;
  justify-content: center;
  padding: 0;
  margin-top: 10px;
  font-weight: 800;
}

.pager-item.selected {
  outline: none;
  border-color: #0077cc;
  background: #0077cc;
  color: #fff;
  cursor: default;
}

<div class="book-component">
  <div class="table-wrapper">
  </div>
</div>

Answer 1

您的 loadTable 函数正在根据您应用程序的当前状态更新 DOM。您可以扩展它以设置 prev/next 按钮的禁用状态，并设置页码按钮的选定 class。

这是一个按钮状态由 loadTable 函数设置的示例。单击事件处理程序应该只更新当前页面（即设置应用程序的状态）。然后你可以在 loadTable 函数中渲染状态。

// based on current page, only show the elements in that range
function loadTable(table) {
  let startIndex = 0;
  if (table.querySelector('th')) startIndex = 1;
  const START = parseInt(table.dataset.currentpage) * table.dataset.pagecount + startIndex;
  const END = START + parseInt(table.dataset.pagecount);
  const TABLE_ROWS = table.rows;
  for (var x = startIndex; x < TABLE_ROWS.length; x++) {
    if (x < START || x >= END) TABLE_ROWS[x].classList.add('inactive');
    else TABLE_ROWS[x].classList.remove('inactive');
  }
  
// You should move this calculation outside of the function
  const ROWS = table.rows.length - 1;
  const NUM_PAGES = Math.ceil(ROWS / perPage);
  
  const prevPage = document.getElementsByName('pagination-prev-button')[0];
  const nextPage = document.getElementsByName('pagination-next-button')[0];

  const isNextDisabled = +table.dataset.currentpage >= NUM_PAGES - 1;
  const isPrevDisabled = +table.dataset.currentpage === 0;

  if (isNextDisabled) {
    nextPage.setAttribute('disabled', true);
  } else {
    nextPage.removeAttribute('disabled');
  }

  if (isPrevDisabled) {
    prevPage.setAttribute('disabled', true);
  } else {
    prevPage.removeAttribute('disabled');
  }

  const items = document.querySelectorAll('.pager-item');
  for (var x = 0; x < items.length; x++) {
    if (x === +table.dataset.currentpage) {
      items[x].classList.add('selected');
    } else {
      items[x].classList.remove('selected');
    }
  }
}

这是完整的工作示例。 https://jsfiddle.net/aloshea/r68gtvmc/

带有分页的下一个和上一个按钮功能

next and prev button functionality with pagination

html

javascript

datatable

pagination

arrows