데이터 테이블에서 페이지 매김을 제거하는 방법


92

저는 jQuery를 처음 사용합니다. 그리드에서 Datatables를 사용했지만 페이지 매김이 필요하지 않습니다.

한 페이지에 주문 목록이 있고 Datatable 그리드에 표시되지만 하단에는 페이지 매김을 표시하고 싶지 않습니다. jQuery 라이브러리에서 약간의 사용자 정의를 사용하여 데이터 테이블에서 페이지 매김을 제거하거나 숨기는 방법이 있습니까?

여기에 이미지 설명 입력

커스터마이징을 시도했지만 방법을 거의 찾지 못했습니다 ..

미리 감사드립니다.


2
어떤 방법이나 플러그인을 사용하고 있습니까?
Naryl 2013

답변:


163

"bPaginate": false,생성자 매개 변수에 전달하는 구성 객체에 포함해야합니다 . 여기에 표시된대로 : http://datatables.net/release-datatables/examples/basic_init/filter_only.html


1
내 데이터의 첫 번째 줄 100 개만 표시하려는 경우 iDisplayLength 매개 변수에 관계없이 모든 데이터를 표시하기 때문에 bPaginate가 작동하지 않습니다. 그것을 피하는 방법을 알고 있습니까?
Alexis Dufrenoy 2014-06-04

내가 틀렸다면 정정하지만 처음 100 개 항목 만 표시하고 페이지 매김을 비활성화하면 사용자는 다음 결과를 표시 할 방법이 없습니다. 그렇다면 데이터 소스를 직접 변경해야 합니다. 다른 문제인 것 같으므로 새 질문을 열고 코드를 제공해야합니다.
nstCactus 2014 년

1
사실은 검색 기능을위한 것이고 너무 많은 줄이 검색 되었기 때문에 사용자가 검색 기준을 변경해야한다는 메시지도 표시해야합니다. 기록을 위해 Datatables 포럼에서 질문했고 해결책은 sDom = lfrt (페이지 매김이없는 경우 "p"없이) 옵션을 추가하는 것입니다. 유용 할 수 있습니다 ...
알렉시스 Dufrenoy

71

페이지 매김 비활성화

DataTables 1.9의 경우

bPaginate페이지 매김을 비활성화 하려면 옵션을 사용 하십시오 .

$('#example').dataTable({
    "bPaginate": false
});

DataTables 1.10 이상

paging페이지 매김을 비활성화 하려면 옵션을 사용 하십시오 .

$('#example').dataTable({
    "paging": false
});

코드 및 데모는 이 jsFiddle 을 참조하십시오 .

페이지 제어를 제거하고 페이지를 활성화 한 상태로 둡니다.

DataTables 1.9의 경우

sDom옵션을 사용 하여 페이지에 표시되는 제어 요소를 구성하십시오.

$('#example').dataTable({
    "sDom": "lfrti"
});

DataTables 1.10 이상

dom옵션을 사용 하여 페이지에 표시되는 제어 요소를 구성하십시오.

$('#example').dataTable({
    "dom": "lfrti"
});

코드 및 데모는 이 jsFiddle 을 참조하십시오 .


2
1.10 이상, 지정 data-paging='false' 경우 테이블 요소 도 작동합니다.
Jeromy French

21

작동 중

아래 코드를 시도하십시오

$('#example').dataTable({
    "bProcessing": true,
    "sAutoWidth": false,
    "bDestroy":true,
    "sPaginationType": "bootstrap", // full_numbers
    "iDisplayStart ": 10,
    "iDisplayLength": 10,
    "bPaginate": false, //hide pagination
    "bFilter": false, //hide Search bar
    "bInfo": false, // hide showing entries
})

20
$(document).ready(function () {
            $('#Grid_Id').dataTable({
                "bPaginate": false
            });
        });

나는 그것을 사용하여 내 문제를 해결했습니다.


12
$('#table_id').dataTable({    
    "bInfo": false, //Dont display info e.g. "Showing 1 to 4 of 4 entries"
    "paging": false,//Dont want paging                
    "bPaginate": false,//Dont want paging      
})

이 코드 시도


6

페이지 매김을 제거하고 싶지만 dataTable의 순서를 지정하려면 페이지 끝에이 스크립트를 추가하십시오!

<script>
$(document).ready(function() {        
    $('#table_id').DataTable({
        "paging":   false,
       "info":     false
    } );
      
  } );
</script>


-1

다음은 몇 가지 다른 답변을 점진적으로 개선 한 대안입니다. settings.aLengthMenu가 다차원이 아니고 (DataTables에 행 길이와 레이블이있는 경우 일 수 있음) 페이지로드 후 데이터가 변경되지 않는다고 가정하면 (단순 DOM로드 DataTable의 경우)이 함수를 삽입하여 페이징을 제거 할 수 있습니다. 여러 페이징 관련 클래스를 숨 깁니다.

아마도 더 강력한 것은 아래 함수 내에서 페이징을 false로 설정하는 것입니다. 그러나 나는 그에 대한 API 호출을 볼 수 없습니다.

$('#myTable').on('init.dt', function(evt, settings) {
    if (settings && settings.aLengthMenu && settings.fnRecordsTotal && settings.fnRecordsTotal() < settings.aLengthMenu[0]) {
        // hide pagination controls, fewer records than minimum length
        $(settings.nTableWrapper).find('.dataTables_paginate, .dataTables_length, .dataTables_info').hide();
    }
}).DataTable();
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.