>  기사  >  웹 프론트엔드  >  bootstrap-table.js를 사용하여 확장된 페이징 도구 모음 기능 구현 정보

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

亚连
亚连원래의
2018-06-14 16:33:561815검색

이 글에서는 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) {
        $(&#39;#table&#39;).bootstrapTable(&#39;selectPage&#39;, parseInt(pageNum));
      }
    }

    내 테이블 ID가 테이블로 정의되어 있으므로 $('#table').bootstrapTable를 자신의 것으로 바꿔야 합니다. 정의된 ID

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

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

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

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

    ejsExcel 템플릿 사용 방법에 대해

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.