bootstrap-table.js를 사용하여 확장된 페이징 도구 모음 기능 구현 정보

이 글에서는 bootstrap-table.js 확장 페이징 툴바를 주로 소개하고 xx페이지로 이동하는 기능을 추가했습니다. 제 레벨이 dom 레벨에 멈춰있기 때문에 이 확장 프로그램은 페이지의 테이블만 지원합니다.

새로운 프로젝트 제안에 오신 것을 환영합니다. 우리는 페이지에 테이블을 표시하기 위해 부트스트랩 테이블 컨트롤을 사용할 계획입니다. 안타깝게도 이 컨트롤의 페이징 도구 모음에는 xx 페이지로 이동하는 기능이 없습니다. 회사의 아티스트(사진만 제작할 수 있는 아티스트, 하지만 이것저것에 대한 저의 뼈아픈 요구 때문에 부득이하게 부트스트랩 테이블의 소스 코드를 변경하여 이 기능을 구현했습니다.

참고: 내 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

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

위 내용은 나중에 도움이 되길 바랍니다. 기사:

자바스크립트로 사진을 얻는 방법. 상위 N개의 기본 색상 값

D3.js에서 물류 지도를 만드는 방법(자세한 튜토리얼)

ejsExcel 템플릿 사용 방법에 대해

위 내용은 bootstrap-table.js를 사용하여 확장된 페이징 도구 모음 기능 구현 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!