jQuery DataTables 플러그인에서 추가 한 검색 창과 바닥 글을 어떻게 제거 할 수 있습니까?

내가 사용하고 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
                 } );
} );

http://datatables.net/usage/options#sDom 을 설정하여 머리글이나 바닥 글을 전혀 그릴 수도 없습니다 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();

테마 롤러를 사용하는 경우 :

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

sDOM@Scott Stafford 에 따르면 DataTables를 구성하는 요소를 표시, 숨기기 또는 재배치하는 데 가장 많이 사용되는 속성입니다. sDOM실제 속성이있는이 속성은 이제 구식 이라고 생각합니다 dom.

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

oficial 문서를 확인하십시오 : https://datatables.net/reference/option/dom

이 예제는 테이블 만 보여줍니다.

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

<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">'
 } );
} );

구성을 간단히 변경하면됩니다.

$('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에서의 DataTable을 초기화하는 동안 거짓 <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'
                 } );
} );

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

DataTables 1.10.5부터 HTML5 data- * 속성을 사용하여 초기화 옵션을 정의 할 수 있습니다.

- dataTables 문서 : 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/에서 동작하는 예제를 .

이 방법의 장점은 표준 tableTables 호출 (즉, $('table.apply_dataTables').DataTable()) 을 가질 수 있고 dataTables 옵션을 테이블별로 구성 할 수 있다는 것입니다.

바닥 글에 id를 할당 한 다음 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를 변경하지 않고 수정해야하는 테이블 만 편집 할 수 있습니다.

예를 들어 열 입력 필터가 있거나 테이블에서 결과를 반환 할 수있는 CMS 검색 양식이 있기 때문에 검색 양식 만 숨기려면 양식을 검사하고 해당 ID를 가져 오기만하면됩니다. (이 글을 쓰는 시점은 그럴 것 같습니다 [tableid]-table_filter.dataTables_filter). 그런 다음 [tableid]-table_filter.dataTables_filter{display:none;}데이터 테이블의 다른 모든 기능을 유지하십시오.