JavaScript를 사용하여 테이블 데이터의 페이징 표시 구현

데이터가 계속 증가함에 따라 테이블 표시가 더욱 어려워집니다. 대부분의 경우 테이블에 포함된 데이터의 양이 너무 많아 로드 속도가 느려지고 사용자는 원하는 데이터를 찾기 위해 끊임없이 페이지를 탐색해야 합니다. 이 기사에서는 JavaScript를 사용하여 테이블 데이터의 페이지 매김 표시를 구현하여 사용자가 원하는 데이터를 더 쉽게 찾을 수 있는 방법을 소개합니다.

1. 동적으로 테이블 생성

페이징 기능을 보다 쉽게 ​​제어하려면 테이블을 동적으로 생성해야 합니다. HTML 페이지에서 아래와 유사한 테이블 요소를 추가합니다.

번호	이름	나이	성별
1	소규	20	여성
2	샤오밍	22	남성
3	작은 꽃	25	여성

JavaScript에서 먼저 모든 테이블 데이터를 포함하는 배열을 정의합니다.

let tableData = [
{ id: 1, name: '小红', age: 20, 성별: 'female' },
{ id: 2 , name : '샤오밍', 나이: 22, 성별: '남자' },
{ id: 3, 이름: '소화', 나이: 25, 성별: '여' },
// 추가 데이터

다음으로 "createTable"이라는 함수를 만듭니다. 이 함수는 빈 테이블 요소를 만들어 HTML 페이지에 삽입합니다.

//테이블 생성
function createTable() {
let table = document.createElement('table'); // 테이블 요소 생성
table.id = 'table-page'; // id
table.classList를 설정합니다. add('table'); // 스타일 추가
let thead = document.createElement('thead');
let tr = document.createElement('tr');
let thNum = document.createElement('th');
thNum.innerHTML = '번호';
tr.appendChild(thNum);
let thName = document.createElement('th');
thName.innerHTML = '이름';
tr.appendChild(thName);
let thAge = document.createElement('th');
thAge.innerHTML = 'Age';
tr.appendChild(thAge);
let thGender = document.createElement('th');
thGender.innerHTML = '성별';
tr.appendChild(thGender);
thead.appendChild(tr);
table.appendChild(thead);
let tbody = document.createElement('tbody');
table.appendChild(tbody);
document.body.appendChild (table);
}

이제 createTable 함수를 호출하여 테이블을 생성합니다.

createTable();

2. 페이지 매김 추가

JavaScript에서 "페이지 매김"이라는 새 함수를 만듭니다. 이 함수는 페이지당 필요한 데이터 양과 현재 페이지 번호를 기준으로 테이블 데이터를 필터링하고 표시합니다. 결과.

// 페이지 매김 기능
function pagination(pageSize, pageNumber) {
let table = document.getElementById('table-page');
let tbody = table.querySelector('tbody');
let start = pageSize * ( pageNumber - 1);
let end = start + pageSize;
let d = tableData.slice(start, end);
tbody.innerHTML = '';
for (let i = 0; i < d.length; i++ ) {

let tr = document.createElement('tr');
for (let key in d[i]) {
  let td = document.createElement('td');
  td.innerHTML = d[i][key];
  tr.appendChild(td);
}
tbody.appendChild(tr);

}
}

이 함수에서는 먼저 테이블 요소와 tbody 요소를 가져옵니다. 그런 다음 페이지당 지정된 데이터 양과 현재 페이지 번호를 사용하여 표시할 데이터 범위를 계산합니다. 그런 다음, 슬라이스 메소드를 사용하여 현재 페이지에 표시할 데이터를 가져오고 루프에서 테이블의 tbody 요소에 추가합니다.

3. 페이징 구성 요소 만들기

다음으로 "createPagination"이라는 함수를 만들어 페이징 구성 요소를 생성합니다.

//페이지 매기기 버튼 구성 요소 만들기
function createPagination(pageSize) {
let totalPage = Math.ceil(tableData.length / pageSize);
let pagination = document.getElementById('pagination');
if (!pagination) {

pagination = document.createElement('div');
pagination.id = 'pagination';
document.body.appendChild(pagination);

}
pagination.innerHTML = '';
for (let i = 1; i <= totalPage; i++) {

let btn = document.createElement('button');
btn.innerHTML = i;
btn.onclick = function() {
  pagination(pageSize, i)
};
pagination.appendChild(btn); 

}
}

이 함수는 각 페이지를 기준으로 모든 페이지 수를 계산합니다. 페이지 수량 생성 버튼 구성 요소입니다. 루프 내에서 각 버튼이 생성되어 "페이지 매김" 요소에 연결됩니다. 마지막으로 페이지 매김 함수 "pagination()"을 호출하도록 버튼의 클릭 이벤트를 설정합니다.

4. 실제 프로젝트에 적용

실제 프로젝트에서는 tableData 배열을 서버에서 얻은 데이터로 대체하고 필요에 따라 테이블 생성 및 페이징 기능을 호출할 수 있습니다.

// 비동기식으로 데이터 요청
let xhr = new XMLHttpRequest();
xhr.open('GET', '/getData');
xhr.onload = function() {
let data = JSON.parse(xhr. responseText);
tableData = data;
createTable();
pagination(pageSize, pageNumber);
createPagination(pageSize);
}
xhr.send();

이 예에서는 XMLHttpRequest 객체를 사용하여 데이터를 얻습니다. 비동기적으로. 그런 다음 데이터는 JSON 개체로 구문 분석되고 createTable, pagination 및 createPagination 함수가 각각 호출됩니다.

5. 요약

위 단계를 통해 JavaScript를 사용하여 페이지에 테이블 데이터를 표시하는 기본 기능을 성공적으로 구현했습니다. 데이터의 양이 많은 경우 이 방법은 테이블의 성능을 크게 향상시키고 사용자에게 더 나은 대화형 경험을 제공합니다. 결국 편리하고 단순한 사용자 경험은 소프트웨어의 매력이다.

위 내용은 JavaScript를 사용하여 테이블 데이터의 페이징 표시 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!