GitHub에서 보기

테이블 파이프라인

Bootstrap Table의 데이터 파이프라인 확장 기능으로, 서버 요청에 클라이언트 데이터 캐시를 제공하여 페이지 매기기 성능을 최적화합니다.

이 페이지에서

이 확장 기능은 서버 측 페이지 매기기 요청에 클라이언트 데이터 캐시 기능을 제공하여 매번 페이지를 넘길 때마다 새로운 서버 요청을 보내는 것을 방지합니다. 대량의 데이터를 처리할 때 다음 두 가지 극단적인 상황 사이의 성능 절축안을 제공합니다:

클라이언트 페이지 매기기: 모든 데이터를 한 번에 클라이언트로 반환
서버 측 페이지 매기기: 매번 페이지를 넘길 때마다 서버에서 데이터를 다시 가져옴

두 가지 핵심 옵션을 추가합니다:

usePipeline: 데이터 파이프라인 캐시 기능을 활성화
pipelineSize: 각 캐시 창의 크기를 설정

캐시 창 설명

캐시 창 크기는 현재 페이지당 항목 수로 나누어 떨어져야 합니다. 플러그인은 자동으로 가장 가깝고 나누어 떨어지는 값으로 위쪽으로 조정합니다. 예를 들어:

파이프라인 크기를 4990으로 설정하고 페이지당 25개를 표시하면 동적으로 5000으로 조정됩니다.

캐시 창은 pipelineSize와 서버에서 반환된 총 행 수에 따라 자동으로 계산됩니다. 예를 들어 캐시 크기가 500이고 총 행 수가 1300이면 다음 캐시 창이 생성됩니다:

[
  {
    "lower": 0,
    "upper": 499
  },
  {
    "lower": 500,
    "upper": 999
  },
  {
    "lower": 1000,
    "upper": 1499
  }
]

서버 요구 사항

서버 인터페이스는 limit(즉 pipelineSize)와 offset 매개변수에 따라 지정된 범위의 데이터를 반환하고 동시에 총 행 수를 반환해야 합니다. 따라서 서버는 offset과 limit를 사용하여 응답 데이터를 조립해야 합니다.

캐시 사용 메커니즘

페이지를 넘길 때 새로운 offset이 여전히 현재 캐시 창 내에 있는지 확인합니다:

창 내에 있으면 로컬 캐시 데이터를 직접 반환
그렇지 않으면 서버에 새로운 캐시 창 데이터를 요청

캐시 무효화 조건

다음 상황에서 현재 캐시가 무효화되고 새로운 서버 요청이 시작됩니다:

정렬 작업
검색 작업
페이지당 항목 수 변경
페이지를 넘겨서 새로운 캐시 창으로 들어감

새로운 이벤트

cached-data-hit.bs.table: 페이지를 넘길 때 로컬 캐시 데이터를 적중할 때 트리거
cached-data-reset.bs.table: 캐시가 무효화되고 새로운 서버 요청을 시작해야 할 때 트리거

사용법

<script src="extensions/pipeline/bootstrap-table-pipeline.js"></script>

예제

옵션

pipelineSize

속성: data-pipeline-size
유형: Number
세부 정보:

각 캐시 창의 크기로, 0보다 커야 합니다.
기본값: 1000

usePipeline

속성: data-use-pipeline
유형: Boolean
세부 정보:

true로 설정하면 파이프라인 캐시를 활성화합니다.
기본값: false

이벤트

onCachedDataHit (cached-data-hit.bs.table)

매개변수: undefined
세부 정보:

페이지를 넘길 때 로컬 캐시 데이터를 적중할 때 트리거됩니다.

onCachedDataReset (cached-data-reset.bs.table)

매개변수: undefined
세부 정보:

로컬 캐시를 재설정해야 할 때(예: 정렬, 검색, 페이지 크기 변경 또는 페이지를 넘겨서 현재 캐시 창을 벗어날 때) 트리거됩니다.