jQuery DataTables 플러그인으로 추가 된 검색 바와 바닥 글을 제거하려면 어떻게해야합니까?

https://stackoverflow.com/questions/1920600

20-09-2019
|

문제

나는 사용 중입니다 jQuery DataTables.

기본적으로 테이블에 추가되는 검색 바와 바닥 글을 제거하고 싶습니다 (표시되는 행 수를 표시). 이 플러그인을 기본적으로 정렬하기 위해 사용하고 싶습니다. 이 작업을 수행 할 수 있습니까?

해결책

을 위한 DataTables> = 1.10, 사용:

$('table').dataTable({searching: false, paging: false, info: false});

을 위한 DataTables <1.10, 사용:

$('table').dataTable({bFilter: false, bInfo: false});

또는 순수한 CSS 사용 :

.dataTables_filter, .dataTables_info { display: none; }

다른 팁

체크 아웃 http://www.datatables.net/examples/basic_init/filter_only.html 표시/숨길 기능 목록.

당신이 원하는 것은 "bfilter"와 "binfo"를 false로 설정하는 것입니다.

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

설정하여 헤더 또는 바닥 글을 전혀 그리울 수도 있습니다. sDom: http://datatables.net/usage/options#sdom

'sDom': 't'

테이블, 헤더 또는 바닥 글 등이 표시됩니다.

여기에서 일부 설명합니다. http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

사용자 정의 필터를 사용하는 경우 검색 상자를 숨길 수 있지만 여전히 필터 기능을 활성화하려고합니다. bFilter: false 방법이 아닙니다. 사용 dom: 'lrtp' 대신, 기본값입니다 'lfrtip'. 선적 서류 비치: https://datatables.net/reference/option/dom

var table = $("#datatable").DataTable({
   "paging": false,
   "ordering": false,
   "searching": false
});

빠르고 더러운 방법은 바닥 글 클래스를 찾아 jQuery 또는 CSS를 사용하여 숨기는 것입니다.

$(".dataTables_info").hide();

Themeroller를 사용하는 경우 :

.dataTables_wrapper .fg-toolbar { display: none; }

<script>
$(document).ready(function() {
    $('#nametable').DataTable({
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false
    });
});
</script>

데이터 가능한 생성자에서

https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box

여기에 추가 할 수 있습니다 sDom 코드에 요소, 상단 검색 창이 숨겨져 있습니다.

$(document).ready(function() {
    $('#example').dataTable( {
"sDom": '<"top">rt<"bottom"flp><"clear">'
 } );
} );

@Scott Stafford가 말했듯이 sDOM DataTables를 구성하는 요소를 보여 주거나 숨기거나 재배치하는 가장 앞진 숙박 시설입니다. 제 생각에는 sDOM 실제 패치와 함께 이제 구식입니다.이 속성은 이제 dom.

이 속성을 사용하면 일부 클래스 또는 ID를 요소로 설정할 수 있으므로 쉽게 세련 될 수 있습니다.

여기에서 of -seacial 문서를 확인하십시오. https://datatables.net/reference/option/dom

이 예제는 테이블 만 표시합니다.

$('#myTable').DataTable({
    "dom": 't'
});

단순히 구성을 변경하여 수행 할 수 있습니다.

$('table').dataTable({
      paging: false, 
      info: false
 });

그러나 빈 바닥 글을 숨기는 것; 이 코드는 트릭을 수행합니다.

 $('table').dataTable({
      paging: false, 
      info: false,

      //add these config to remove empty header
      "bJQueryUI": true,
      "sDom": 'lfrtip'

});

초기화 할 수 없다는 것을 알리는 것입니다 DataTable 같은 <table> 요소 두 번.

같은 문제가 발생하면 설정할 수 있습니다 searching 그리고 paging HTML에서 데이터를 초기화하는 동안 False <table> 이와 같이

 $('#tbl').DataTable({
    searching: false, 
    paging: false,
    dom: 'Bfrtip',
    buttons: [
       'copy', 'csv', 'excel', 'pdf', 'print'
    ]
 });

CSS를 통해 숨길 수 있습니다.

#example_info, #example_filter{display: none}

sdom 속성을 사용할 수 있습니다. 코드는 다음과 같이 보입니다.

$(document).ready(function() {
    $('#example').dataTable( {
        'sDom': '"top"i'
                 } );
} );

İt는 검색 및 호출기 상자를 숨 깁니다.

Datatables 1.10.5 현재 HTML5 데이터-* 속성을 사용하여 초기화 옵션을 정의 할 수 있습니다.

-DataTables Documentation : HTML5 데이터 -* 속성 - 테이블 옵션

따라서 지정할 수 있습니다 data-searching="false" data-paging="false" data-info="false" 에 table. 예를 들어,이 테이블은 검색, 페이징 적용 또는 정보 블록을 표시 할 수 없습니다.

<table id="example" class="display" width="100%" data-searching="false" data-paging="false" data-info="false">
    <thead>
        <tr>
            <th>Name</th>
            <th data-orderable="false">Avatar</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

보다 https://jsfiddle.net/jhfrench/17v94f2s/의 작업 예제.

이 접근법의 장점은 표준 데이터블 콜을 할 수 있다는 것입니다 (즉, $('table.apply_dataTables').DataTable()) DataTables 옵션을 구성 할 수 있지만 테이블별로 구성 할 수 있습니다.

바닥 글을 할당 한 다음 CSS를 사용하여 스타일링 하여이 작업을 수행했습니다.

    <table border="1" class="dataTable" id="dataTable_${dtoItem.key}" >
     <thead>
        <tr>
            <th></th>

        </tr>
    </thead>
 <tfoot>
    <tr>
            <th id="FooterHidden"></th>
    </tr>
</tfoot>
<tbody>

    <tr>

                <td class="copyableField"></td>

    </tr>
 </tbody>
</table>

그런 다음 CSS를 사용하여 스타일링 :

#FooterHidden{
   display: none;
}

위에서 언급 한 방법은 저에게 효과가 없습니다.

가장 간단한 방법은 다음과 같습니다.

<th data-searchable="false">Column</th>

공통 CSS 또는 JS를 변경하지 않고 수정해야 할 테이블 만 편집 할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow