Блог

Главная - Вопросы по программированию - Как ввести разбиение на страницы с использованием базового javascript в данные JSON, полученные с помощью запроса XMLhttp?

Как ввести разбиение на страницы с использованием базового javascript в данные JSON, полученные с помощью запроса XMLhttp?

#javascript #xmlhttprequest

Вопрос:

Я извлекаю данные JSON с помощью запроса XMLHttp, и они у меня есть в таблице. Я хочу ввести разбиение на страницы таким образом, чтобы на каждой странице отображалось только 5 наборов данных, используя только самые основы javascript. Я попытался использовать неупорядоченный список, а затем щелкнуть, я попытался использовать кнопки, но я не получаю желаемого результата. Я действительно новичок в этом деле, и у меня нет идей. Пожалуйста, дайте некоторое представление о том, как достичь желаемого результата.

 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);

}

Ответ №1:

Судя по вашей операции, я не совсем уверен, с какой проблемой вы столкнулись. Вам нужно будет отслеживать результаты таблицы, чтобы пользователь мог перемещаться вперед и назад. Как вы отслеживаете свои результаты, зависит от вас, но я создал фрагмент ниже, демонстрирующий пример. Я предполагаю, что ваши данные структурированы как массив объектов. Этот пример должен помочь вам начать.

В принципе, код отслеживает, какие записи отображаются, сохраняя их индекс в атрибуте данных таблицы. Затем, когда пользователь отправляет команду для навигации по странице, код будет использовать эти индексные номера для извлечения следующего или предыдущего набора записей для отображения в таблице.

 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>

Ответ №2:

Я предполагаю, что вы получаете массив объектов.

Вот функция разбиения на страницы (vanilla js), которая преобразует массив в -> массив массивов

 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;
};

Теперь длина этого массива равна «количеству страниц». используя эту длину, вы можете динамически создавать кнопки. Добавьте прослушиватель событий (я бы использовал делегирование событий и индексы(или, может быть, идентификатор данных)) и получите доступ к нужным вам данным (это означает, что если нажата кнопка с индексом 0, то получите доступ к 0-му индексу в этом массиве массивов).

Метки: ,