0

Есть задание вывести данные в таблицу и сделать пагинацию на чистом джс. У меня выводит данные но когда я переключаю страницу странные данные не удаляются а новые добавляются. Как правильно сделать удаление и вывод новой текущей страницы? и как правильно вывести данные если в объекте есть не все поля? нужно реализовать на чистом JS Буду благодарен за любой совет

    const data = [{
            "#": 1,
            "First Name": "Wilhelm Conrad",
            "Last Name": "Röntgen",
            "Born Location": "Lennep",
            "Died Location": "Munich, Germany",
            "Gender": "male",
            "Prizes": "yes"
        },
        {
            "#": 1,
            "First Name": "Wilhelm Conrad",
            "Last Name": "Röntgen",
            "Born Location": "Lennep",
    
            "Gender": "male",
            "Prizes": "yes"
        },
        {
            "#": 1,
            "First Name": "Wilhelm Conrad",
            "Last Name": "Röntgen",
            "Born Location": "Lennep",
            "Died Location": "Munich, Germany",
            "Gender": "male",
            "Prizes": "yes"
        },
        {
            "#": 1,
            "First Name": "Wilhelm Conrad",
            "Last Name": "Röntgen",
            "Born Location": "Lennep",
    
            "Gender": "male",
            "Prizes": "yes"
        },
        {
            "#": 1,
            "First Name": "Wilhelm Conrad",
            "Last Name": "Röntgen",
            "Born Location": "Lennep",
    
            "Gender": "male",
            "Prizes": "yes"
        },
        {
            "#": 1,
            "First Name": "Wilhelm Conrad",
            "Last Name": "Röntgen",
            "Born Location": "Lennep",
            "Died Location": "Munich, Germany",
            "Gender": "male",
            "Prizes": "yes"
        },
        {
            "#": 1,
            "First Name": "Wilhelm Conrad",
            "Last Name": "Röntgen",
            "Born Location": "Lennep",
            "Died Location": "Munich, Germany",
            "Gender": "male",
            "Prizes": "yes"
        }
    ];
    
    const keys = Object.keys(data[0]);
    
    let tab = document.createElement('table');
    
    const buildTableHeader = () => {
        let thead = document.createElement('thead');
        let tr = document.createElement('tr');
    
        for (const key of keys) {
            const th = document.createElement("th");
            th.appendChild(document.createTextNode(key));
            tr.appendChild(th);
        }
        thead.appendChild(tr);
        tab.appendChild(thead);
    
        document.body.appendChild(tab);
    };
    
    let currentPage = 1
    let rows = 2
    
    
    let tb = document.createElement('tbody');
    tb.classList.add('tbid')
    
    
    const buildTableBody = (cp = 1) => {
        document.getElementsByClassName('tbid').innerHTML = ''
    
    
        let trimStart = (cp - 1) * rows
        let trimEnd = trimStart + rows
    
        let trimmedData = data.slice(trimStart, trimEnd)
    
        let pages = Math.round(data.length / rows);
    
        for (let a of trimmedData) {
            let tr = document.createElement('tr');
            for (let key in a) {
                let td = document.createElement('td');
                let tn = document.createTextNode(a[key]);
                td.appendChild(tn);
                tr.appendChild(td);
            }
            tb.appendChild(tr);
        }
        tab.appendChild(tb);
        document.body.appendChild(tab);
    
    
        let items = [];
    
        for (let i = 1; i <= pages; i++) {
            let a = document.createElement('a');
            let linkText = document.createTextNode(i);
            a.appendChild(linkText);
            document.body.appendChild(a);
            items.push(a)
        }
    
        for (let item of items) {
            item.addEventListener('click', function() {
                console.log(+this.innerHTML)
                //  currentPage = +this.innerHTML
                buildTableBody(+this.innerHTML)
            });
        }
    
    }
    
    buildTableHeader()
    buildTableBody()

1 ответ 1

0

Найдите в коде ниже строчку

tb.innerHTML = '';

const data = [{
            "#": 1,
            "First Name": "Wilhelm Conrad 1",
            "Last Name": "Röntgen",
            "Born Location": "Lennep",
            "Died Location": "Munich, Germany",
            "Gender": "male",
            "Prizes": "yes"
        },
        {
            "#": 1,
            "First Name": "Wilhelm Conrad 2",
            "Last Name": "Röntgen",
            "Born Location": "Lennep",
    
            "Gender": "male",
            "Prizes": "yes"
        },
        {
            "#": 1,
            "First Name": "Wilhelm Conrad 3",
            "Last Name": "Röntgen",
            "Born Location": "Lennep",
            "Died Location": "Munich, Germany",
            "Gender": "male",
            "Prizes": "yes"
        },
        {
            "#": 1,
            "First Name": "Wilhelm Conrad 4",
            "Last Name": "Röntgen",
            "Born Location": "Lennep",
    
            "Gender": "male",
            "Prizes": "yes"
        },
        {
            "#": 1,
            "First Name": "Wilhelm Conrad 5",
            "Last Name": "Röntgen",
            "Born Location": "Lennep",
    
            "Gender": "male",
            "Prizes": "yes"
        },
        {
            "#": 1,
            "First Name": "Wilhelm Conrad 6",
            "Last Name": "Röntgen",
            "Born Location": "Lennep",
            "Died Location": "Munich, Germany",
            "Gender": "male",
            "Prizes": "yes"
        },
        {
            "#": 1,
            "First Name": "Wilhelm Conrad 7",
            "Last Name": "Röntgen",
            "Born Location": "Lennep",
            "Died Location": "Munich, Germany",
            "Gender": "male",
            "Prizes": "yes"
        }
    ];
    
    const keys = Object.keys(data[0]);
    
    let tab = document.createElement('table');
    
    const buildTableHeader = () => {
        let thead = document.createElement('thead');
        let tr = document.createElement('tr');
    
        for (const key of keys) {
            const th = document.createElement("th");
            th.appendChild(document.createTextNode(key));
            tr.appendChild(th);
        }
        thead.appendChild(tr);
        tab.appendChild(thead);
    
        document.body.appendChild(tab);
    };
    
    let currentPage = 1
    let rows = 2
    
    
    let tb = document.createElement('tbody');
    tb.classList.add('tbid')
    
    
    const buildTableBody = (cp = 1) => {
        //document.getElementsByClassName('tbid').innerHTML = ''
        tb.innerHTML = ''; // !!!
        document.querySelectorAll('a').forEach(el => el.remove()); // !!!
    
        let trimStart = (cp - 1) * rows
        let trimEnd = trimStart + rows
    
        let trimmedData = data.slice(trimStart, trimEnd)
    
        let pages = Math.round(data.length / rows);
    
        for (let a of trimmedData) {
            let tr = document.createElement('tr');
            for (let key in a) {
                let td = document.createElement('td');
                let tn = document.createTextNode(a[key]);
                td.appendChild(tn);
                tr.appendChild(td);
            }
            tb.appendChild(tr);
        }
        tab.appendChild(tb);
        document.body.appendChild(tab);
    
        let items = [];
    
        for (let i = 1; i <= pages; i++) {
            let a = document.createElement('a');
            let linkText = document.createTextNode(i);
            a.appendChild(linkText);
            document.body.appendChild(a);
            items.push(a)
        }
    
        for (let item of items) {
            item.addEventListener('click', function() {
                console.log(+this.innerHTML)
                //  currentPage = +this.innerHTML
                buildTableBody(+this.innerHTML)
            });
        }
    
    }
    
    buildTableHeader()
    buildTableBody()

2
  • Спасибо очень помогли. А как сделать что бы таблица выводилась одинаково даже если отсутствуют некоторые поля в объекте?
    – Name
    23 янв 2020 в 10:36
  • @Name В каком объекте?
    – user176262
    23 янв 2020 в 12:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.