webentwicklung-frage-antwort-db.com.de

Ändern des DOM-Elements Position des Suchfelds in Datentabellen

Eigentlich bin ich neu in jQuery Datatables Plugin. 

Ich habe das Plugin mithilfe dieser Methode mit diesem Code an meine Tabellen angehängt.

$(document).ready(function() 

         $('#table_id').dataTable({

         });
 });

Jetzt möchte ich, dass datatables ein Textfeld enthält, in das wir unsere Filterzeichenfolge eingeben können und die Ergebnisse gefiltert werden. 

Daher möchte ich mein vorhandenes Textfeld für diesen Zweck verwenden. Ich möchte kein neues Textfeld in die Benutzeroberfläche einfügen. Also ging ich diesen Link durch

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

Aber ich verstehe nicht. Kann das vorhandene Textfeld verwendet werden? Bitte beraten

Sehen Sie, ich hatte eine Situation wie diese, bevor Sie diese Datentypen implementieren

enter image description here

Jetzt, wenn ich dieses Plug-In für datendatene anwende, wird ein neues Textfeld für die Suche hinzugefügt. Ich möchte kein neues Textfeld. Ich möchte, dass mein vorhandenes Textfeld die Suchfunktion implementiert.

16
Nikhil Agrawal

Das ist sehr einfach. Zuerst müssen Sie das Standardsuchfeld ausblenden:

.dataTables_filter {
   display: none;
}

Beispiel für ein eigenes Suchfeld, das sich irgendwo im HTML-Code befindet:

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

skript zum Suchen/Filtern bei Eingabe in das Suchfeld

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

arbeitsdemo -> http://jsfiddle.net/TbrtF/

Wenn Sie DataTables 1.10 verwenden, sollte der JS folgendermaßen aussehen:

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

Um die Filteroptionen zu entfernen, können Sie css wie in anderen Antworten erwähnt verwenden, oder Sie können es bei der Initialisierung der Datentabelle mit entfernen:

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

oder mit sDom-Attribut wie folgt:

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

Siehe hier http://datatables.net/usage/options#sDom für weitere Optionen.

Wenn Sie nun Ihr eigenes Textfeld als Filterfeld verwenden, fügen Sie einfach einen keypress-Handler hinzu und verwenden Sie die fnFilter-Option wie folgt:

$(document).ready(function() 

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

Sie können ein neues Element newSearchPlace definieren, um den Suchfilter für die Datentabelle zu enthalten:

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

Dann setzen Sie den Suchfilter in diesen neuen Ort:

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

sie können den Stil der Sucheingabe sehr einfach mit css ändern

in css Datei: 

.dataTables_filter input {
     background: blue;
}

Mit Javascript

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

Versuchen Sie es, indem Sie es in Ihre Konsole einfügen.

1
Cracker0dks

Ab DataTables 1.10 kann der Initialisierung eine Eigenschaft dom hinzugefügt werden. Obwohl es ziemlich schwer zu meistern ist, können alle DataTables-Objekte in <div> - Elemente eingeschlossen werden, um die eingebauten Steuerelemente für Tabellen zu formatieren.

Eine dom -Eigenschaft wie die folgende würde die Standardsuchleiste mit einem <div> Ihrer Wahl umschließen, mit dem Sie nach links ziehen können (wobei f ist die Filter-/Suchleiste und t ist die Tabelle:

$('#example').dataTable( {
  "dom": '<"pull-left" f><t>'
} );

Ausgabe:

<div class="pull-left">
  <div id="example_filter" class="dataTables_filter"><label><input type="search" aria-controls="example"></label></div>
</div>
<div>
  <table id="example" class="table dt-responsive nowrap dataTable no-footer dtr-inline" style="width: 100%;" role="grid">
</div>  

Weitere Informationen: DataTables dom-Option

0
GuillaumeCleme

Für die aktuelle Version im Dezember 2018 (v1.10.19) müssen Sie folgende Schritte ausführen:

  1. Das Standardsuchfeld (CSS) ausblenden:

    .dataTables_filter { display: none; }
    
  2. Füge einen neuen Filter zum gewünschten Ort hinzu (HTML)

    Search:<br><input type="text" id="searchFilter">
    
  3. Nach Ihrer DataTables-Inicialisierungsfunktion müssen Sie Ihre Suchfunktion (JS) schreiben:

    $(document).ready(function() {
       var table = $('#example').DataTable();
    
    $('#searchFilter').on( 'keyup', function () {
       table.search( this.value ).draw();
    } );
    

Hinweis : fnfilter ist veraltet. Verwenden Sie search (), aber search () zeichnet die Tabelle nicht neu, sodass Sie draw () verwenden müssen.

0
culter

Ja, Sie können eine Klasse in Ihrer CSS erstellen:

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

und fügen Sie diese Klasse dann mit jquery oder javascript zur datatable search div hinzu.

beispiel:

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

stellen Sie sicher, dass sich Ihr Skript im Kopfbereich Ihrer HTML-Datei befindet.

0
Mack Mack