bootstrap-table.js를 사용하여 확장된 페이징 도구 모음 기능 구현 정보
- 亚连원래의
- 2018-06-14 16:33:561809검색
이 글에서는 bootstrap-table.js 확장 페이징 툴바를 주로 소개하고 xx페이지로 이동하는 기능을 추가했습니다. 제 레벨이 dom 레벨에 멈춰있기 때문에 이 확장 프로그램은 페이지의 테이블만 지원합니다.
새로운 프로젝트 제안에 오신 것을 환영합니다. 우리는 페이지에 테이블을 표시하기 위해 부트스트랩 테이블 컨트롤을 사용할 계획입니다. 안타깝게도 이 컨트롤의 페이징 도구 모음에는 xx 페이지로 이동하는 기능이 없습니다. 회사의 아티스트(사진만 제작할 수 있는 아티스트, 하지만 이것저것에 대한 저의 뼈아픈 요구 때문에 부득이하게 부트스트랩 테이블의 소스 코드를 변경하여 이 기능을 구현했습니다.
참고: 내 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
위에 페이지 번호를 입력하여 이동할 수 있습니다. 렌더링은 다음과 같습니다.
위 내용은 나중에 도움이 되길 바랍니다. 기사:
자바스크립트로 사진을 얻는 방법. 상위 N개의 기본 색상 값D3.js에서 물류 지도를 만드는 방법(자세한 튜토리얼)ejsExcel 템플릿 사용 방법에 대해위 내용은 bootstrap-table.js를 사용하여 확장된 페이징 도구 모음 기능 구현 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!