データ型応答性 - 検索バー（ブートストラップ）

Question

私はプロジェクトでDatatablesを実装し始めました。 私のプロジェクトはブートストラップ3に基づいています。 私は、datatables download-pageに必要なファイルを含むパッケージをビルドし、ドキュメントに基づいて簡単なデータテーブルを作成しました。すべて正常に動作しますが、私は応答性に問題があります。ご覧のとおり

：次のスクリーンショットを見てみましょう。検索バーに問題があります。

テーブルには、次のHTMLを持っています

<table width="100%" class="table table-striped table-bordered dt-responsive table-condensed table-hover" id="event_history" cellspacing="0"> .......

テーブルには、次のJSがあります

var table = $('#event_history').DataTable({ 
responsive: true, 
colReorder: true, 
lengthChange: true, 
"order": [[ 0, "desc" ]], 
}); 

おそらく誰かが私はこの問題を解決するのに役立ちます。

ありがとうございました！

Answer 1

テーブルがフルページ幅を占める場合、ブートストラップスタイリングでDataTableのコントロールがうまくラップされます。this exampleを参照してください。

this exampleに示すように、ページ全体の幅を占めていないパネルにテーブルを表示していると、col-ルールが適用されないことがあります。 domオプションに特殊な細工された値を使用すると、予想されるコンテナサイズに基づいて特定のテーブルの列レイアウトを構成できます。例えば

：

var table = $('#example').DataTable({ 
    responsive: true, 
    dom: 
     "<'row text-center'<'col-xs-12'l><'col-xs-12'f>>" + 
     "<'row'<'col-xs-12'tr>>" + 
     "<'row text-center'<'col-xs-12'i><'col-xs-12'p>>" 
}); 

は、コードやデモンストレーションのためthis example参照してください。