DOM Öğesinin Değiştirilmesi Veri kutusundaki arama kutusunun konumu

Question

Aslında jQuery veri tabanı eklentisinde yeni.

Bu kodu kullanarak bu yöntemi kullanarak eklentiyi tablolarıma iliştirdim.

$(document).ready(function() 

     $('#table_id').dataTable({ 

     }); 
}); 

Şimdi Benim istediğim datatables bizim filtre dizesi girdiğinizde sonuçlar süzülür elde edileceği bir metin kutusu sağlar olduğunu.

Bu amaçla mevcut tasarlanmış metin kutumu kullanmak istiyorum UI'ye yeni bir metin kutusu eklemek istemiyorum. Yani bu bağlantıyı

http://datatables.net/examples/basic_init/dom.html

geçirdi Ama Anlamıyorum. Mevcut metin kutusunu kullanmak mümkün mü? Bu yeni bir metin istemiyoruz arama için ekleniyor yeni metin kutusu eklentisi datatables uyguladığınızda

bu Şimdi

datatables uygulamadan önce böyle bir durum başlamıştı görün Lütfen tavsiye kutu Benim mevcut metin kutusunun arama işlevselliğini gerçekleştirmesini istiyorum.

.dataTables_filter input { 
    background: blue; 
} 

JavaScript

$(".dataTables_filter input").css({ "background" :"blue" }); 

ile konsola macun ile bu Deneyin:

Answer 1

Bu çok basit. Kendi tasarlanmış arama kutusunun

.dataTables_filter { 
    display: none; 
} 

Örnek, HTML yere yerleştirilen: Öncelikle varsayılan arama kutusunu gizlemek zorundadır arama kutusuna yazarken/filtreyi arama

<input type="text" id="searchbox"> 

senaryoyu

$("#searchbox").keyup(function() { 
    dataTable.fnFilter(this.value); 
});  

çalışma demo ->http://jsfiddle.net/TbrtF/

Eğer istimal ederse

$("#searchbox").on("keyup search input paste cut", function() { 
    dataTable.search(this.value).draw(); 
}); 

Answer 2

Eğer css Dosya css

ile çok kolay arama girişinin stilini değiştirebilirsiniz.

Answer 3

diğer yanıtlar belirtildiği gibi css kullanabilirsiniz filtre seçeneklerini kaldırmak için veya kullandığınız datatable başlatılmasıyla içinde kaldırabilirsiniz::

$("#table").dataTable({"bFilter": false}); //disables filter input 

gibi gr DataTable 1.10 JS görünmelidir ya böyle sDom özelliğini kullanarak:

"sDom": '<"H"lr>t<"F"ip>' //when bJuery is true 

burada http://datatables.net/usage/options#sDom Diğer seçenekler için bkz.

Şimdi o zaman sadece bir keypress işleyicisi takmak ve bunun gibi fnFilter seçeneği kullanmak bir filtre kutusu olarak kendi metin alanını kullanarak ilgili:

$(document).ready(function() 

    oTable = $('#table_id').dataTable({ 
     "sDom": '<"H"lr>t<"F"ip>' 
    }); 
    $('#myInputTextField').keypress(function(){ 
     oTable.fnFilter($(this).val()); 
    }); 
}); 

Answer 4

veri bulunması için yeni bir unsur newSearchPlace tanımlayabilirsiniz içeride tabloda, arama filtresi:

$("#newSearchPlace").html($(".dataTables_filter")); 

0123:

<div id="newSearchPlace"></div> 

Sonra bu yeni yerin içinde arama filtresini koymak

Answer 5

Evet sevdiği css bir sınıf yapabilirsiniz:

.pull-left{ 
    float: left !important; 
} 

ve sonra jquery veya javascript kullanarak datatable arama div için bu sınıf ekleyin.

örnek:

$('.dataTables_filter').addClass('pull-left'); 

senaryonuz HTML'nizin başlık kısmında olduğundan emin olun.