DataTable : 항목 표시 드롭 다운을 숨기고 검색 상자를 유지하십시오.


129

항목 표시 드롭 다운을 숨기고 검색 상자를 DataTable에 유지할 수 있습니까? 검색 상자와 함께 맨 아래에 페이지 매김이있는 10 행을 항상 표시하고 싶지만 항목 표시 드롭 다운을 표시하고 싶지 않습니다.

답변:


288

이 링크에서 직접 자세한 정보를 찾을 수 있습니다. http://datatables.net/examples/basic_init/filter_only.html

$(document).ready(function() {
$('#example').dataTable({
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bInfo": false,
    "bAutoWidth": false });
});

희망이 도움이됩니다!

편집 : 게으른 경우 "bLengthChange": false, 변경해야합니다. :)


56

Datatable> 1.1.0을 사용하는 경우 lengthChange옵션은 다음 과 같습니다.

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

28
"searching": false,   // Search Box will Be Disabled

"ordering": false,    // Ordering (Sorting on Each Column)will Be Disabled

"info": true,         // Will show "1 to n of n entries" Text at bottom

"lengthChange": false // Will Disabled Record number per page

19

이 게시물에 대한 핵심 답변 "bLengthChange": false,은 항목 드롭 다운을 숨길 것입니다


9

DataTables <= 1.9의 경우 @perpo 의 답변

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

잘 작동하지만 1.10 이상에서는 다음을 시도하십시오.

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

여기서 l"길이 변경 입력 제어"를 생략했습니다 .

1.9 문서

1.10 문서


이것은 div holdint 요소를 제거하기 때문에 더 좋습니다. with bLenghChange 요소는 사라졌지 만 공백이 있습니다. 감사 !
Hamid Salari

9

1
이것은 2018 년 데이터 테이블에서 작동하지만 다른 어느 것도 수행하지 않았습니다.
Dammeul

8

sDom : "Tfrtip"또는 콜백을 통해 :

"fnHeaderCallback": function(){
    $('#YOURTABLENAME-table_length').hide();
}

3

"항목 표시"레이블을 비활성화하려면 코드 dom : 'Bfrtip'을 추가하거나 "bInfo"를 추가하십시오. false

$('#example').DataTable({
    dom: 'Bfrtip'
})

2

이것을 시도해 볼 수도 있습니다.

사용하여 CSS에서 간단히 숨 깁니다.

 .dataTables_length {
        display: none;
    }

둘 다 작동합니다.


2

그냥 써 :

  $(document).ready( function () {
        $('#example').dataTable( {
          "lengthChange": false
        } );
    } );

1

"항목 표시"를 숨기지 만 여전히 페이지 매김이 있습니다. 아래 코드를 사용했는데 효과가있었습니다.

"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false


0

"항목 표시"레이블을 비활성화하려면 "bInfo"를 사용하십시오. 예 : "bFilter"는 검색 구성 요소이지만 기본적으로 활성화되어 있습니다.

$(document).ready( function () {
  $('#example').dataTable( {
    "bInfo": false
  } );
} );

테이블 정보 표시를 사용 가능 또는 사용 불가능하게합니다. 여기에는 해당 조치가 수행중인 경우 필터링 된 데이터에 대한 정보를 포함하여 현재 페이지에 표시되는 데이터에 대한 정보가 표시됩니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.