취업/Datatable

[Datatable]Navigation with text input 페이지 이동 input으로 페이지 이동하기로 변경.

카슈밀 2023. 4. 6. 11:16
반응형

 

결과물

https://datatables.net/plug-ins/pagination/input

 

 

Navigation with text input

Navigation with text input Shows an input element into which the user can type a page number Sometimes for quick navigation, it can be useful to allow an end user to enter which page they wish to jump to manually. This paging control uses a text input box

datatables.net

 

페이지네이션으로 페이지별 쪼갰는데, 해당 기본 옵션에선 첫장과 끝장빼곤 한개씩 이동이라...

실무자가 불편하다고해서 바꾸기로 했는데, 원하는 옵션이 없어
그냥 input으로 이동하고 싶은 페이지로 바로 이동하도록 하는 옵션으로 변경.

$(document).ready(function() {
      $('#example').dataTable( {
          	pagingType: "input",
            pageLength: 10, // 기본 출력 갯수
            language: {
                oPaginate: {
                    sNext: '<i class="fa fa-forward"></i>',
                    sPrevious: '<i class="fa fa-backward"></i>',
                    sFirst: '<i class="fa fa-step-backward"></i>',
                    sLast: '<i class="fa fa-step-forward"></i>'
                }
            },
      } );
  } );

CDN은 편리하지만, CDN이 차단된 나라가 있을 수 있어(Ex: 중국...)

JS파일을 만들어 적용시켜버렸다.

https://cdn.datatables.net/plug-ins/1.13.4/pagination/input.js

해당 사이트로 접속해서 Ctrl+s 눌러 저장후 서버 자체에서 호출하는 방식으로 해결.

 

정상 작동되고 더 편리해졌다.

728x90