jQuery Pagination Plugin: Good Paginator 추천 페이징
Good Paginator is a complete jQuery Pagination plugin that makes including pagination quite simple activity, all of the navigation logic is inbuilt, and it is usually very customizable. Excellent Paginator jQuery Pagination plugin may filter your knowledge routinely on shopper aspect. Click on the display shot under for the demonstration to see the different filter choices supplied by Good Paginator. jQuery Good Paginator helps some parameters and customized themes that can be utilized to customize the appear and feel to your want.
Contents [hide]
GOOD PAGINATOR PARAMETERS
- total records: Whole no of data e.g. 50
- records per page: No of data on every web page e.g. 10
- controls always: If real subsequent, prev, first and final buttons might be at all times seen
- data container: ID of HTML ingredient which has the info you wish to filter, e.g., the id of some desk
- Dataelement: Baby parts sort that you only want to filter e.g. ‘tr’ in case your knowledge container is a desk, see the demonstration for various choices.
- Size: This parameter determines the no of navigation buttons to be generated additionally subsequent, prev, first and final button are displayed relying on this setting. If the worth of size is larger than total records/records per page then subsequent, prev, first and final buttons are not going to be displayed, default worth of size is 10.
- Initval: Preliminary web page to be chosen, default is zero.
- Subsequent: Textual content on Subsequent button e.g. ‘Subsequent.’
- prev: Textual content on Earlier button e.g. ‘Prev.’
- first: Textual content on First button e.g. ‘First.’
- final: Textual content on Final button e.g. ‘Final.’
- go: Textual content on Go button e.g. ‘Go.’
- theme: CSS class for theme e.g.’inexperienced.’
- show: Navigation show relying on the worth ‘double’ or ‘single.’
- change: callback operate to be known as on every worth change; this act provides you with the web page, no beginning index of knowledge and finish index of knowledge.
Good Paginator의 스타일링은 매우 간단할 수 있습니다. 예를 들어 CSS를 설명할 "inexperienced"이라는 테마를 만들려면 4개의 CSS 과정을 설명하면 됩니다
.inexperienced
.inexperienced.regular
.inexperienced.energetic
.inexperienced .btn
HTML 파일에서 헤드 부분에 다음을 추가합니다.
최신 jQuery 스크립트에 대한 참조를 추가합니다.
- smartpaginator.js 파일에 대한 참조 추가
- smartpaginator.css에 대한 참조 추가
HTML 파일의 몸체 안에 텍스트 콘텐츠 블록 요소(예: div)를 생성합니다.
<div id="smart-paginator" > </>
<script sort="textual content/javascript">
$(doc).prepared(operate() {
$('#smart-paginator').smartpaginator();
operate onChange(newPageValue)
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.zero Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Good Pagination</title>
<script src="jquery-1.four.four.min.js" sort="textual content/javascript"></script>
<script src="smartpaginator.js" sort="textual content/javascript"></script>
<hyperlink href="smartpaginator.css" rel="stylesheet" sort="textual content/css" />
<script sort="textual content/javascript">
$(doc).prepared(operate() );
</script>
</head>
<physique>
<div id="smart-paginator">
</div>
</physique>
</html>
자료가 2012 년 이후로 변화되거나 개선되는 부분이 없다. 실무적으로 사용할 때 신규 브라우저나 스마트폰에서 테스트 검증이 필요할 수 도 있습니다.
- Feb 22, 2012, Subsequent, prev, first and final button visibility parameter added.
https://www.egrappler.com/jquery-pagination-plugin-good-paginator/
jQuery Pagination Plugin: Good Paginator
This simple and customizable jQuery plugin simplifies the usage of Bootstrap Pagination and progressively enhances your server-side pagination
www.egrappler.com
'프로그래밍 > jQuery 👍' 카테고리의 다른 글
| AnyPicker Custom Picker - 모바일 달력 형태로 만들어보자. (0) | 2023.08.10 |
|---|---|
| AJAX 및 jQuery를 사용하여 파일을 BLOB로 다운로드 하기 (0) | 2023.05.22 |
| fullCalendar 의 좌측 시분 hour minute 표기 hh:mm 형태로 변경하기 (0) | 2023.03.16 |
| fullCalendar 의 tooltip 및 좌측 시간별 width 조절하기 (0) | 2023.03.16 |
| jQuery : jQuery.countdown 카운트 다운 count down 라이브러리 (0) | 2022.10.21 |