jQuery DataTables 플러그인에서 추가한 검색 모음과 바닥글을 제거하려면 어떻게 해야 합니까?

jQuery DataTables 플러그인에서 추가한 검색 모음과 바닥글을 제거하려면 어떻게 해야 합니까?

저는 jQuery DataTables를 사용하고 있습니다.

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

데이터 테이블 >=1.10의 경우 다음을 사용합니다.

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

▁the▁want를 사용할 수 할 수 ,.search()플러그인의 , html, html로 숨겨야 .dom설정:

$('table').dataTable({dom: 'lrt'});

기본값은 다음과 같습니다.lfrtip또는<"H"lfr>t<"F"ip>(으)로)jQueryUI사실입니다.f) , char 돔검필을터(검색) html을 .ip정보 및 페이지(아래)를 참조하십시오.

데이터 테이블 < 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();

@@Scott Stafford가 것처럼.sDOM는 데이터 테이블을 구성하는 요소를 표시하거나 숨기거나 재배치하는 데 가장 적합한 속성입니다.제 생각엔sDOM현재는 구식이고, 실제 패치로 이 속성은 현재입니다.dom.

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

공식 문서는 여기에서 확인하십시오. https://datatables.net/reference/option/dom

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

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

롤러를 사용하는 경우:

.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

이 작업은 구성을 변경하는 것만으로 수행할 수 있습니다.

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

그러나 빈 바닥글을 숨기려면 이 코드를 사용해야 합니다.

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

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

});

여기에 추가할 수 있습니다.sDom코드의 요소, 상단 검색 표시줄이 숨겨집니다.

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

초기화할 수 없음을 알려주는 메시지입니다.DataTable마찬가지로<table>요소를 두 번 누릅니다.

동일한 문제가 발생할 경우 설정할 수 있습니다.searching그리고.pagingHTML에서 데이터 테이블을 초기화하는 동안 false<table>이것처럼.

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

sDom 특성을 사용할 수 있습니다.코드는 이렇게 보입니다.

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

검색 상자와 호출기 상자를 숨기지 않습니다.

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

-dataTables 문서: HTML5 data-* 속성 - 테이블 옵션

지정할 수 있습니다.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/ 에서 작업 예제를 참조하십시오.

이 접근 방식의 장점은 표준 dataTables 호출(즉,$('table.apply_dataTables').DataTable()dataTables 옵션을 표별로 구성할 수 있습니다.

예를 들어 열 입력 필터가 있거나 테이블에서 결과를 반환할 수 있는 CMS 검색 양식이 이미 있기 때문에 검색 양식을 숨기려는 경우에는 양식을 검사하고 ID를 얻기만 하면 됩니다. (이 문서를 작성할 때는 그렇게 보입니다.)[tableid]-table_filter.dataTables_filter. 그럼 간단하게 하시오.[tableid]-table_filter.dataTables_filter{display:none;}데이터 테이블의 다른 모든 기능을 유지합니다.

이것은 나를 위해 작동했습니다 #table은 테이블의 ID입니다.

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

제게 효과가 있습니다.

테이블의 다음 속성을 사용하여 검색 막대를 제거할 수 있습니다. data-false="false"

$('#my_table').DataTable({
   "iDisplayLength": 100,
   "searching": false, 
   "paging": false,
   "info": false,
});

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

#example_info, #example_filter{display: none}

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

필터링 입력 제어가 없습니다.(https://datatables.net/reference/option/dom)

    /* Results in:
        {length}
        {processing}
        {table}
        {information}
        {pagination}
    */
    $('#example').dataTable( {
      "dom": 'lrtip'
    } );

언급URL : https://stackoverflow.com/questions/1920600/how-can-i-remove-the-search-bar-and-footer-added-by-the-jquery-datatables-plugin