이 글에서는 bootstrap-table.js 확장 페이징 도구 모음을 주로 소개하고 xx페이지로 이동하는 기능을 추가합니다. 편집자 수준은 아직 DOM 수준이므로 이 확장 프로그램은 페이지의 테이블만 지원합니다. , 환영합니다. 모든 사람에게 도움이 되기를 바랍니다.
【관련 영상 추천: 부트스트랩 튜토리얼】
새 프로젝트에서 부트스트랩 테이블 컨트롤을 사용하여 페이지에 테이블을 표시하려고 합니다. 안타깝게도 이 컨트롤의 페이징 도구 모음에는 해당 기능이 없습니다. 회사 아티스트(그림만 제작할 수 있는데 이것저것 물어보는 아티스트)의 고통스러운 요구에 부응하기 위해, 나는 과감하게 bootstrap-table의 소스 코드를 다음과 같이 변경했습니다. 이 기능을 구현하세요.
참고: 내 js 수준은 dom 수준에 남아 있기 때문에 이 확장은 페이지에서 단일 테이블만 지원합니다. 즉, 동일한 페이지가 bootstrap-table을 두 번 참조하면 점프가 유효하지 않습니다.
만약 각계각층의 신들이 더 완벽한 해결책을 가지고 있다면 제가 배울 수 있도록 메시지를 남겨주세요.
컨트롤 참조 방법에 대해서는 자세히 설명하지 않겠습니다. 인터넷의 Baidu가 나보다 소스 코드를 직접 살펴보겠습니다.
1. bootstrap-table.js의 소스 코드를 다운로드합니다(최소 다운로드하지 않도록 주의하세요. 다운로드한 버전은 버전: 1.11.0입니다). 소스 코드에서 '
html.push('</p>',
'<p class="pull-' + this.options.paginationHAlign + ' pagination">',
'<ul class="pagination' + sprintf(' pagination-%s', this.options.iconSize) + '">',
'<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >' + this.options.paginationPreText + '</a></li>');ok를 찾아 위 코드를 다음 코드
html.push('</p>',
'<p class="goPage"><input type="button" value="跳转" class="pageBtn" onclick="toPage();"></p>',
'<p class="goPage">跳转到第<input id="pageNum" class="pageNum" type="text">页</p>',
'<p class="pull-' + this.options.paginationHAlign + ' pagination">',
'<ul class="pagination' + sprintf(' pagination-%s', this.options.iconSize) + '">',
'<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >' + this.options.paginationPreText + '</a></li>');에 포함합니다. 이 시점에서 소스 코드가 수정됩니다.
2 그런 다음 전역에 다음 클래스
.pageBtn {
}
.pageNum {
width: 40px;
border-radius: 3px;
}
.goPage {
float: right;
margin-left: 5px;
margin-top: 13px;
height: 30px;
}를 추가합니다. 필요한 경우 버튼 스타일을 사용자 정의하세요. pgeBtn
3에서 js 파일에 점프 메소드를 추가하세요
function toPage() {
var pageNum = $("#pageNum").val();
if (pageNum) {
$('#table').bootstrapTable('selectPage', parseInt(pageNum));
}
}내 테이블 ID가 테이블로 정의되어 있으므로 $('#table').bootstrapTable를 자신의 것으로 바꿔야 합니다. 정의된 id
위에 페이지 번호를 입력하면 점프할 수 있습니다. 렌더링은 다음과 같습니다.
관련 권장 사항:
방법 JS를 사용하여 현재 도메인 이름을 확인하고 지정된 페이지로 점프
서블릿이 JSP 페이지로 점프한 후 경로 문제에 대한 관련 설명
위 내용은 bootstrap-table.js는 xx페이지로 이동하는 기능을 구현하는 메소드를 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
