287

jQuery DataTablesを使用しています。

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

4

21 に答える 21

588

DataTables >=1.10の場合、次を使用します。

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

このプラグインの機能を有効にしたい場合は、次の設定.search()で検索バーの HTML を「非表示」にする必要があります。dom

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

デフォルトはlfrtipor <"H"lfr>t<"F"ip>(jQueryUIが true の場合) で、fchar は dom 内のフィルター (検索) html ip、情報およびページネーション (フッター) を表します。

DataTables <1.10の場合、次を使用します。

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

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

.dataTables_filter, .dataTables_info { display: none; }
于 2009-12-17T09:59:40.243 に答える
91

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

必要なのは、「bFilter」と「bInfo」を false に設定することです。

$(document).ready(function() {
    $('#example').dataTable( {
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false
                 } );
} );
于 2011-04-18T18:46:52.647 に答える
43

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

'sDom': 't'

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

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

于 2012-04-23T20:01:54.277 に答える
26

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

于 2015-04-29T02:31:30.797 に答える
11 
var table = $("#datatable").DataTable({
   "paging": false,
   "ordering": false,
   "searching": false
});
于 2016-10-05T13:02:00.323 に答える
7

手っ取り早い方法は、フッターのクラスを見つけて、jQuery または CSS を使用して非表示にすることです。

$(".dataTables_info").hide();
于 2009-12-17T09:58:57.700 に答える
4

テーマローラーを使用している場合：

.dataTables_wrapper .fg-toolbar { display: none; }
于 2010-02-26T11:51:29.150 に答える
4 
<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

于 2015-02-04T11:31:38.627 に答える
4

これは、構成を変更するだけで実行できます。

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

ただし、空のフッターを非表示にするには; このコードはトリックを行います：

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

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

});
于 2016-05-03T10:51:22.503 に答える
1

css で非表示にすることができます:

#example_info, #example_filter{display: none}
于 2009-12-17T10:00:03.707 に答える
0

最も簡単な方法は次のとおりだと思います。

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

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

于 2016-09-28T15:13:54.940 に答える
0

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

上記の方法は私にとってはうまくいきません。

于 2014-01-16T08:39:06.973 に答える