Serverside Datatables検索ボックスのスタイリング

Question

私は今この問題の解決策を探してみましたが、何も見つけられませんでした。誰かが私にこれを助けることを願っています。

私は、データテーブルの検索入力と表示入力がタグ内でスタックしていることに気付きました。ソースのjavascriptからラベルタグを削除しようとすると、入力が消えます。私はそれを間違っているかもしれませんが、それを削除して幅を調整し、動的な列サイズを守る方法がありますか？

このページは

<div class="row"> 
    <div class="col-sm-12"> 
     <div id="table_filter" class="dataTables_filter pull-left"> 
      <label> 
       <input type="search" class="form-control input-sm" placeholder="Search" aria-controls="table"> 
      </label> 
     </div> 
    </div> 
</div> 

にロードされたときにコード

function pb(a) { 
     var b = a.oClasses, 
      c = a.sTableId, 
      d = a.oLanguage, 
      e = a.oPreviousSearch, 
      f = a.aanFeatures, 
      g = '<input type="search" class="' + b.sFilterInput + '"/>', 
      j = d.sSearch, 
      j = j.match(/_INPUT_/) ? j.replace("_INPUT_", g) : j + g, 
      b = h("<div/>", { 
       id: !f.f ? c + "_filter" : null, 
       "class": b.sFilter 
      }).append(h("<label/>").append(j)), 
      f = function() { 
       var b = !this.value ? 
        "" : this.value; 
       b != e.sSearch && (fa(a, { 
        sSearch: b, 
        bRegex: e.bRegex, 
        bSmart: e.bSmart, 
        bCaseInsensitive: e.bCaseInsensitive 
       }), a._iDisplayStart = 0, O(a)) 
      }, 
      g = null !== a.searchDelay ? a.searchDelay : "ssp" === y(a) ? 400 : 0, 
      i = h("input", b).val(e.sSearch).attr("placeholder", d.sSearchPlaceholder).bind("keyup.DT search.DT input.DT paste.DT cut.DT", g ? Oa(f, g) : f).bind("keypress.DT", function(a) { 
       if (13 == a.keyCode) return !1 
      }).attr("aria-controls", c); 
     h(a.nTable).on("search.dt.DT", function(b, c) { 
      if (a === c) try { 
       i[0] !== I.activeElement && i.val(e.sSearch) 
      } catch (d) {} 
     }); 
     return b[0] 
    } 

（ジャバスクリプトファイルのソースから）の話パートイムでは、検索入力がラベルの下でどのように参照してください？私はそれを削除してカラムのサイジングを守ることができるかどうか疑問に思っていました。

Answer 1

labelノードを検索ボックスから削除するには、次のコードを使用します。

var table = $('#example').DataTable({ 
    initComplete: function(){ 
     $('.dataTables_filter label').children().unwrap('<label/>'); 
    } 
}); 

コードとデモンストレーションについては、this exampleを参照してください。