JQuery 페이지에 테이블 데이터 추가 및 paging_jquery 구현

코드 복사 코드는 다음과 같습니다.

var countPage;
var pageSize;
var countSize
var endIndex; // 사용자가 제출한 정보
var name;
var age;

// 줄 번호 정의

$( document).ready(function() {
// 사용자 추가 이벤트 등록
$("#submit").click(function() {
// 사용자가 제출한 정보 가져오기
name = $("#name").val();
sex = $("input[name='sex']:checked").val()
age = $(" #age") .val();
pageSize = $("#selectSize option:selected").val();
// Alert(이름 성별 연령 pageSize);

// 테이블 아래에 tr 객체를 생성합니다
$tr = $("")
$td1 = $("$td2 = $("");
$td3 = $("");
$ td4 = $( "");
$td5 = $("")

$tr.append($ td1.append( ""))
$tr.append($td2.append(name))
$tr.append($td3.append(sex) )));$tr.append($td4.append(age))
$tr.append($td5.append("" )); $("#show").append($tr);
pageNation();

})// 표시 항목 수
$("#selectSize").change(function() {
pageSize = $("#selectSize option:selected").val();
pageNation();
});

// 페이징 작업을 위한 버튼 클릭 이벤트 등록
$("#first").click(pageNation)
$("#back").click(pageNation) ;
$(" #next").click(pageNation)
$("#last").click(pageNation)

// 페이징 연산을 위한 함수
var pageNation = function() {
// 전체 데이터 항목 개수 가져오기
countSize = $("#show tr").size()// 가져오기 총 페이지 수
countPage = Math.ceil(countSize / pageSize);

// 페이지 넘기기 작업 처리
if (this.nodeType == 1) {
var idValue = $(this).attr("id ");
if ("first" == idValue) {
//alert(idValue)
nowPag = 1
} else if (" back" == idValue) {
// 경고(nowPag);
if (nowPag > 1) {
nowPag--;
}

} else if (" next" == idValue) {
// Alert(idValue);
if (nowPag < countPage) {
nowPag ;
}
} else if ("last" == idValue ) {
// 경고( idValue);
nowPag = countPage;

}
// 경고(pageSize)
// 디스플레이 인덱스
starIndex = ( nowPag - 1) * pageSize 1;
endIndex = nowPag * pageSize

if (endIndex > countSize) {
// Alert("The index가 총 레코드 수보다 큽니다." endIndex);
endIndex = countSize;
}

if (countSize < pageSize) {
// Alert("총 레코드 수 records 가 페이지당 표시 항목 수보다 적습니다." endIndex);
endIndex = countSize;
}

// Alert(starIndex);

if (starIndex == endIndex) {
// 표시된 작업
$("# show tr:eq(" (starIndex - 1) ")").show()
$("#show tr:lt(" (starIndex - 1) ")").hide();
} else {
// 표시 작업
$("#show tr:gt(" (starIndex - 1) ")"). show();
$("#show tr:lt( " (endIndex - 1) ")").show()

// 숨겨진 작업
$("#show tr :lt(" (starIndex - 1) ")").hide ();
$("#show tr:gt(" (endIndex - 1) ")").hide();
}
// 하단 표시 작업 변경
$("# sizeInfo")
.html(
"현재 " starIndex " 레코드에서 " endIndex " 레코드로, 총 " countSize
" records.");
$("#pageInfo") .html("현재 페이지는 " nowPag ", 총 " countPage "페이지입니다.")


[html] 일반 복사 보기 내 코드 조각에서 파생된 코드 보기