web-dev-qa-db-ja.com

jQuery DataTablesプラグインによって追加された検索バーとフッターを削除する方法を教えてください。

私は jQuery DataTables を使っています。

デフォルトでテーブルに追加されている検索バーとフッター（表示されている行数を表示）を削除します。基本的にはソートにこのプラグインを使いたいだけです。これはできますか？

jqueryhtmldatatables
222
leora

DataTables> = 1.1の場合は、次のように使用します。

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

DataTables <1.1の場合は、次のように使用します。

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

または純粋なCSSを使用する：

.dataTables_filter, .dataTables_info { display: none; }
429
antpaw

表示/非表示にする機能のリストについては、 http://www.datatables.net/examples/basic_init/filter_only.html をご覧ください。

欲しいのは、 "bFilter"と "bInfo"をfalseに設定することです。

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

sDomを設定しても、ヘッダーやフッターをまったく描画することはできません。 http://datatables.net/usage/options#sDom

'sDom': 't'

テーブルだけを表示し、ヘッダーやフッターなどは表示しません。

それはここでいくらか議論されます： http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

38
Scott Stafford

カスタムフィルタを使用している場合は、検索ボックスを非表示にしたいがフィルタ機能を有効にしたい場合があるため、bFilter: falseはお勧めできません。代わりにdom: 'lrtp'を使用してください。デフォルトは'lfrtip'です。ドキュメント： https://datatables.net/reference/option/dom

23
sulaiman sudirman
var table = $("#datatable").DataTable({
   "paging": false,
   "ordering": false,
   "searching": false
});
8
Pietro La Grotta

簡単で汚い方法は、フッターのクラスを見つけてjQueryまたはCSSを使って隠すことです。

$(".dataTables_info").hide();
6
kgiannakakis
<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

4
Gaurav Bhatra

あなたがthemerollerを使っているならば：

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

これは単に設定を変更することによって行うことができます。

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

しかし、空のフッターを隠すために。このコードはうまくいきます。

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

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

});
3
Shayan Sulehri

ここであなたはあなたのコードにsDom要素を追加することができます、一番上の検索バーは隠されています。

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

@Scott Staffordが述べたように、sDOMname__は、DataTableを構成する要素を表示、非表示、または移動するための最も適切なプロパティです。 sDOMname__は古くなっていると思います。実際のパッチではこのプロパティはdomname__になっています。

このプロパティはあるクラスやIDを要素に設定することも可能にしますので、あなたはより簡単にスタイリッシュにすることができます。

ここで公式文書をチェックしてください。 https://datatables.net/reference/option/dom

この例ではテーブルのみが表示されます。

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

念のため、同じ<table>要素でDataTableを2回初期化することはできません。

同じ問題が発生した場合は、HTMLでDataTableを初期化するときにsearchingおよびpaging falseを設定できます<table>

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

あなたはsDom属性を使用することができます。コードはこんな感じです。

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

検索ボックスとポケットベルを非表示にします。

1
Justget Meinside

DataTable 1.10.5から、HTML5のdata- *属性を使って初期化オプションを定義できるようになりました。

- dataTablesドキュメント：HTML5 data- *属性 - テーブルオプション

そのため、tableにdata-searching="false" data-paging="false" data-info="false"を指定できます。たとえば、この表では検索、ページングの適用、情報ブロックの表示はできません。

<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オプションをテーブルごとに設定できる一方で、標準のdataTables呼び出し（つまり$('table.apply_dataTables').DataTable()）を使用できることです。

1
Jeromy French

あなたはCSSでそれらを隠すことができます：

#example_info, #example_filter{display: none}
1
graphicdivine

私は最も簡単な方法だと思います：

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

一般的なCSSやJSを変更することなく、変更する必要があるテーブルのみを編集できます。

0
WalterV

フッターに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;
}

上記のように方法は私のために働いていません。

0
newProgramer
hello friends you can add simply searching: false in your js





$('#companies_grid').DataTable({
        responsive: true,
        searching: false,
        iDisplayLength: 25,
        "ajax": base_url + "companies/company_table",
        "columns": [{
                "data": "SRNO"
            },
            {
                "data": "CompanyName"
            },
            {
                "data": "Country"
            },
            {
                "data": "CustomDomain"
            },
            {
                "data": "Email"
            },
            {
                "data": "Edit"
            }
        ]
    });
0
Mohammad Malek