时间戳

首页 > 解决方案 > 纯JS中表格元素的下一个/上一个按钮

javascript - 纯JS中表格元素的下一个/上一个按钮

问题描述

我有一个包含大量数据的表格，当我在一定数量的条目（10、20、50、100 或所有结果）中显示元素时，我需要添加分页。我不需要页数，一个按钮next和previous就足够了。

我是 javascript 的初学者，不能使用 jquery 或 react 或数据表来帮助我，所以这必须在纯 JS 中完成。你知道我该怎么做吗？先感谢您。

let datas = document.getElementById("data");
superHeroes(data);

var caracters = [];
let nbr = 20;
let first = 0;
let actualPage = 1;

/* let pages = document.getElementById('my-page');
let pageCount = pages.length; */

// fonctions asychrones afin de lire les données Json sans devoir attendre l'exécution des autres

async function fetching() { // on attend le retour des données
    caracters = await fetch('https://rawcdn.githack.com/akabab/superhero-api/0.2.0/api/all.json')
        .then(res => res.json());
    console.log(caracters)
};

function printHeroes(nbElement, offset) {
    var Tab = "";

    for (i = offset; i < offset + nbElement; i++) {
        Tab += `
        <tr>
            <td><img src="${caracters[i].images.xs}"/> </td>
            <td class="hero-name"> ${caracters[i].name} </td>
            <td class="hero-fullname"> ${caracters[i].biography.fullName} </td>
            <td class="hero-powerstats"> ${caracters[i].powerstats.intelligence} 
            ${caracters[i].powerstats.strength}
            ${caracters[i].powerstats.speed} 
            ${caracters[i].powerstats.durability} 
            ${caracters[i].powerstats.power} 
            ${caracters[i].powerstats.combat} </td>
            <td class="hero-race"> ${caracters[i].appearance.race} </td>
            <td class="hero-gender"> ${caracters[i].appearance.gender} </td>
            <td class="hero-height"> ${caracters[i].appearance.height} </td>
            <td class="hero-weight"> ${caracters[i].appearance.weight} </td>
            <td class="hero-placeOfBirth"> ${caracters[i].biography.placeOfBirth} </td>
            <td class="hero-alignment"> ${caracters[i].biography.alignment} </td>
            </tr> `

    }
    return Tab;
}

async function superHeroes() {
    await fetching();

    // NOMBRE D'ELEMENTS PAR PAGE :
    let nbrSelector = document.getElementById("maxRows");
    nbrSelector.addEventListener("change", function () {
        nbElement = parseInt(this.value);
        datas.innerHTML = printHeroes(nbElement, 0);
    })
    // PASSER A LA PAGE SUIVANTE :
    let Next = document.querySelector('#btn-next');
    Next.addEventListener("click", function goForward() {
        if (first + nbr <= nbElement + first) {
            first += nbr;
            actualPage++;
            datas.innerHTML = printHeroes(nbElement, 0);
        }
    })

    // PASSER A LA PAGE PRECEDENTE :
    let Prev = document.querySelector('#btn-previous');
    Prev.addEventListener("click", function goBackward() {
        if (first - nbr >= 0) {
           first -= nbr;
           actualPage--;
           datas.innerHTML = caracters + printHeroes(nbElement, 0);
        }
    });

}


And here's my HTML : 

<body id="my-page">

    <h1>Superheroes Database</h1>
    <br /><br />

    <p>All of them in one place</p>
    <br /><br />

    <input type="text" id="search" onkeyup="search()" placeholder="Search for names...">
    <form>
        <label class="selector" for="th-select">Search...</label>
        <select id="th-list">
            <option value="name">NAME</option>
            <option value="name">FULL NAME</option>
            <option value="name">RACE</option>
            <option value="name">POWERSTATS (Intelligence)</option>
            <option value="name">POWERSTATS (Strength)</option>
            <option value="name">POWERSTATS (Speed)</option>
            <option value="name">POWERSTATS (Durability)</option>
            <option value="name">POWERSTATS (Power)</option>
            <option value="name">POWERSTATS (Combat)</option>
            <option value="name">GENDER</option>
            <option value="name">PLACE OF BIRTH</option>
            <option value="name">ALIGNMENT</option>
            <option value="name" selected>ANY</option>
        </select>
    </form>

    <form>
        <label class="custom-select" for="maxRows-select">Nombre d'éléments par page : </label>
            <select id="maxRows">
                <option value=10>10</option>
                <option value=20 selected>20</option>
                <option value=50>50</option>
                <option value=100>100</option>
                <option value=563>All</option>
            </select>

        </form>


<p id="no-result"></p>

<button class="btn-page" id="btn-previous"> ᗕ previous </button>
<button class="btn-page" id="btn-next"> next ᗒ </button>

    <!-- TABLE CONSTRUCTION-->
    <table id="table" class="tableau" style="width:100%">
        <thead>

            <!-- HEADING FORMATION -->
            <tr>
                <!-- met le contenu sur une ligne -->
                <th rowspan="2">Picture</th> <!-- en-tête du tableau -->
                <th rowspan="2">Name</th>
                <th rowspan="2">Full Name</th>
                <th rowspan="2">Powerstats</th>
                <th rowspan="2">Race</th>
                <th rowspan="2">Gender</th>
                <th rowspan="2">Height</th>
                <th rowspan="2">Weight</th>
                <th rowspan="2">Place of Birth</th>
                <th rowspan="2">Alignement</th>


        </thead>
        <tbody id="data">
        </tbody>


<p id="no-result"></p>

</body>

</html>```

标签： javascripthtmljquery

解决方案

到目前为止，您的程序还不是解决方案：因此 next 和 prev 可以正常工作，您会看到搜索按钮

var caracters = [];
let datas = document.getElementById("data");
var maxHeroes = 0;
var nbElement = 0;
var nbrPages = 0;
var actualPage = 0;
superHeroes(datas);


/* let pages = document.getElementById('my-page');
let pageCount = pages.length; */

// fonctions asychrones afin de lire les données Json sans devoir attendre l'exécution des autres

async function fetching() { // on attend le retour des données
  caracters = await fetch('https://rawcdn.githack.com/akabab/superhero-api/0.2.0/api/all.json')
    .then(res => res.json());

  //console.log(caracters)
};

function printHeroes(nbElement, offset) {

  var Tab = "";

  for (i = offset * nbElement; i < (offset + 1) * nbElement; i++) {
    if (i >= maxHeroes) break;
    Tab += `
        <tr>
            <td><img src="${caracters[i].images.xs}"/> </td>
            <td class="hero-name"> ${caracters[i].name} </td>
            <td class="hero-fullname"> ${caracters[i].biography.fullName} </td>
            <td class="hero-powerstats"> ${caracters[i].powerstats.intelligence} 
            ${caracters[i].powerstats.strength}
            ${caracters[i].powerstats.speed} 
            ${caracters[i].powerstats.durability} 
            ${caracters[i].powerstats.power} 
            ${caracters[i].powerstats.combat} </td>
            <td class="hero-race"> ${caracters[i].appearance.race} </td>
            <td class="hero-gender"> ${caracters[i].appearance.gender} </td>
            <td class="hero-height"> ${caracters[i].appearance.height} </td>
            <td class="hero-weight"> ${caracters[i].appearance.weight} </td>
            <td class="hero-placeOfBirth"> ${caracters[i].biography.placeOfBirth} </td>
            <td class="hero-alignment"> ${caracters[i].biography.alignment} </td>
            </tr> `

  }
  return Tab;
}

async function superHeroes(datas) {
  await fetching();

  // NOMBRE D'ELEMENTS PAR PAGE AND Dipslay the first data:
  let nbrSelector = document.getElementById("maxRows");
  nbElement = parseInt(nbrSelector.value);
  maxHeroes = caracters.length;
  nbrPages = (maxHeroes % nbElement ? 1 : 0) + Math.floor(maxHeroes /  nbElement);
  actualPage = 1;
  datas.innerHTML = printHeroes(nbElement, 0);
  
  nbrSelector.addEventListener("change", function() {
    nbElement = parseInt(this.value);
    nbrPages = (maxHeroes % nbElement ? 1 : 0) + Math.floor(maxHeroes /  nbElement);
    actualPage = 1;
    datas.innerHTML = printHeroes(nbElement, 0);
  })
  // PASSER A LA PAGE SUIVANTE :
  let Next = document.querySelector('#btn-next');
  Next.addEventListener("click", function goForward() {
    if (actualPage < nbrPages) actualPage++;
    datas.innerHTML = printHeroes(nbElement, actualPage - 1);
  });

  // PASSER A LA PAGE PRECEDENTE :
  let Prev = document.querySelector('#btn-previous');
  Prev.addEventListener("click", function goBackward() {
    if (actualPage > 1) actualPage--;
    datas.innerHTML = printHeroes(nbElement, actualPage - 1);
  });

}
<body id="my-page">
  <h1>Superheroes Database</h1>
  <br /><br />

  <p>All of them in one place</p>
  <br /><br />

  <input type="text" id="search" onkeyup="search()" placeholder="Search for names...">
  <form>
    <label class="selector" for="th-select">Search...</label>
    <select id="th-list">
      <option value="name">NAME</option>
      <option value="name">FULL NAME</option>
      <option value="name">RACE</option>
      <option value="name">POWERSTATS (Intelligence)</option>
      <option value="name">POWERSTATS (Strength)</option>
      <option value="name">POWERSTATS (Speed)</option>
      <option value="name">POWERSTATS (Durability)</option>
      <option value="name">POWERSTATS (Power)</option>
      <option value="name">POWERSTATS (Combat)</option>
      <option value="name">GENDER</option>
      <option value="name">PLACE OF BIRTH</option>
      <option value="name">ALIGNMENT</option>
      <option value="name" selected>ANY</option>
    </select>
  </form>

  <form>
    <label class="custom-select" for="maxRows-select">Nombre d'éléments par page : </label>
    <select id="maxRows">
      <option value=10>10</option>
      <option value=20 selected>20</option>
      <option value=50>50</option>
      <option value=100>100</option>
      <option value=563>All</option>
    </select>

  </form>


  <p id="no-result"></p>

  <button class="btn-page" id="btn-previous"> ᗕ previous </button>
  <button class="btn-page" id="btn-next"> next ᗒ </button>

  <!-- TABLE CONSTRUCTION-->
  <table id="table" class="tableau" style="width:100%">
    <thead>

      <!-- HEADING FORMATION -->
      <tr>
        <!-- met le contenu sur une ligne -->
        <th rowspan="2">Picture</th>
        <!-- en-tête du tableau -->
        <th rowspan="2">Name</th>
        <th rowspan="2">Full Name</th>
        <th rowspan="2">Powerstats</th>
        <th rowspan="2">Race</th>
        <th rowspan="2">Gender</th>
        <th rowspan="2">Height</th>
        <th rowspan="2">Weight</th>
        <th rowspan="2">Place of Birth</th>
        <th rowspan="2">Alignement</th>


    </thead>
    <tbody id="data">
    </tbody>


    <p id="no-result"></p>

</body>

推荐阅读