stackoom
  简体   繁体   中英

Next/Previous button for table elements in pure JS

 原文  2021-02-27 10:13:39  6   1    javascript/ html/ jquery

Question

I have a table with a lot of datas, and I need to add a pagination as I display the element in a certain number of entries (10, 20, 50, 100 or all results). I don't need the number of pages, a button next and previous are enough.

I'm a beginner in javascript and can't use jquery or react or datatables to help me, so this must be done in pure JS. Do you have any idea how can I do this? Thank you in advance.

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>```

1 answers

solution1
 0 ACCPTED  2021-02-27 12:27:49

your program wasnot so far the solution: so the next and prev are functional, you'll see for the search button

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Table Pagination : How can I create a table with 10 elements and implement first, previous, next and last button? Getting the next and previous elements in backbone.js Targeting Pure elements in next.js with CSS modules Next and Previous button for JS/HTML survey page JS Text Loop with Previous, Pause & Next Button Previous/Next button not working for my table How to reduce JS array length if next elements equal previous Remove previous JS function when clicking next button swiper.js custom previous and next button does not work on click How to add next previous button to js jQuery slider?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM