「datatable」--検索ボックス

1065 ワード

検索ボックススタイルの変更とイベントの処理手順に注目します.
要素を確認すると、検索ボックスに関連するスタイルは2つあります.
 

上は検索ボックスの長さと位置を変更し、他のスタイルの変更は要素を自分で審査することができます.
jquery選択要素を使用してスタイルを変更することもできます.
  //$("#example_filter label").css({"background-color":"yellow","font-size":"200%"});
  // $("#example_filter label").addClass("col-xs-12");
  // $("#example_filter label input").addClass("col-xs-12");

≪イベントの検索|Search Events|ldap≫:検索を行うとsearchイベントがトリガーされます.
table.on( 'search.dt', function () {
    $('#filterInfo').html( 'Currently applied global search: '+table.search() );
} );

次にdatatableがtableを呼び出します.search().draw() .
検索ボックスを自分で書いてtableを呼び出すことができます.search(str).draw()テーブルの検索と再描画を完了します.
ここでの検索は、構成されたserverSide:trueに基づいて自動的にajaxを介してバックグラウンド検索を送信します.