bootstrap-table.js는 xx페이지로 이동하는 기능을 구현하는 메소드를 추가합니다.

이 글에서는 bootstrap-table.js 확장 페이징 도구 모음을 주로 소개하고 xx페이지로 이동하는 기능을 추가합니다. 편집자 수준은 아직 DOM 수준이므로 이 확장 프로그램은 페이지의 테이블만 지원합니다. , 환영합니다. 모든 사람에게 도움이 되기를 바랍니다.

【관련 영상 추천: 부트스트랩 튜토리얼】

새 프로젝트에서 부트스트랩 테이블 컨트롤을 사용하여 페이지에 테이블을 표시하려고 합니다. 안타깝게도 이 컨트롤의 페이징 도구 모음에는 해당 기능이 없습니다. 회사 아티스트(그림만 제작할 수 있는데 이것저것 물어보는 아티스트)의 고통스러운 요구에 부응하기 위해, 나는 과감하게 bootstrap-table의 소스 코드를 다음과 같이 변경했습니다. 이 기능을 구현하세요.

참고: 내 js 수준은 dom 수준에 남아 있기 때문에 이 확장은 페이지에서 단일 테이블만 지원합니다. 즉, 동일한 페이지가 bootstrap-table을 두 번 참조하면 점프가 유효하지 않습니다.

만약 각계각층의 신들이 더 완벽한 해결책을 가지고 있다면 제가 배울 수 있도록 메시지를 남겨주세요.

컨트롤 참조 방법에 대해서는 자세히 설명하지 않겠습니다. 인터넷의 Baidu가 나보다 소스 코드를 직접 살펴보겠습니다.

1. bootstrap-table.js의 소스 코드를 다운로드합니다(최소 다운로드하지 않도록 주의하세요. 다운로드한 버전은 버전: 1.11.0입니다). 소스 코드에서 '

  html.push(&#39;</p>&#39;,
         &#39;<p class="pull-&#39; + this.options.paginationHAlign + &#39; pagination">&#39;,
         &#39;<ul class="pagination&#39; + sprintf(&#39; pagination-%s&#39;, this.options.iconSize) + &#39;">&#39;,
         &#39;<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >&#39; + this.options.paginationPreText + &#39;</a></li>&#39;);

로그인 후 복사

ok를 찾아 위 코드를 다음 코드

  html.push(&#39;</p>&#39;,
        &#39;<p class="goPage"><input type="button" value="跳转" class="pageBtn" onclick="toPage();"></p>&#39;,
        &#39;<p class="goPage">跳转到第<input id="pageNum" class="pageNum" type="text">页</p>&#39;,
        &#39;<p class="pull-&#39; + this.options.paginationHAlign + &#39; pagination">&#39;,
        &#39;<ul class="pagination&#39; + sprintf(&#39; pagination-%s&#39;, this.options.iconSize) + &#39;">&#39;,
        &#39;<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >&#39; + this.options.paginationPreText + &#39;</a></li>&#39;);

에 포함합니다. 이 시점에서 소스 코드가 수정됩니다.

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

위에 페이지 번호를 입력하면 점프할 수 있습니다. 렌더링은 다음과 같습니다.

관련 권장 사항:

새 JSP 페이지로 점프하는 ajax 방법 공유

방법 JS를 사용하여 현재 도메인 이름을 확인하고 지정된 페이지로 점프

서블릿이 JSP 페이지로 점프한 후 경로 문제에 대한 관련 설명

위 내용은 bootstrap-table.js는 xx페이지로 이동하는 기능을 구현하는 메소드를 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!