jQuery DataTablesプラグインによって追加された検索バーとフッターを削除するにはどうすればよいですか？

私はjQuery DataTablesを使用しています。

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

以下のためのDataTable> = 1.10、使用：

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

以下のためのDataTable <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();

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

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

@ScottスタッフォードsDOMが述べたように、DataTableを構成する要素を表示、非表示、または再配置するための最も適切なプロパティです。これsDOMは古くなっていると思いますdom。実際のパッチでは、このプロパティは現在です。

このプロパティを使用すると、いくつかのクラスまたはIDを要素に設定することもできるため、スタイリッシュに操作できます。

こちらの公式ドキュメントを確認してください：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>要素で2回初期化することはできません。

あなたは同じ問題が発生した場合、あなたは設定することができます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'
                 } );
} );

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

DataTables 1.10.5以降、HTML5 data- *属性を使用して初期化オプションを定義できるようになりました。

- のDataTableのドキュメント：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オプションを構成できる一方で、標準の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;}、データテーブルの他のすべての機能を保持するだけです。