web-dev-qa-db-fra.com

Modification de la position de l'élément DOM dans le champ de recherche dans les tables de données

En fait, je suis nouveau dans le plugin jQuery datatables. 

J'ai attaché le plugin à mes tables en utilisant cette méthode en utilisant ce code.

$(document).ready(function() 

         $('#table_id').dataTable({

         });
 });

Ce que je veux maintenant, c'est que datatables fournisse une zone de texte dans laquelle nous pouvons entrer notre chaîne de filtrage et les résultats seront filtrés. 

Donc, je veux utiliser ma zone de texte conçue existante à cet effet, je ne veux pas ajouter une nouvelle zone de texte dans l'interface utilisateur. Alors je suis passé par ce lien

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

Mais je ne comprends pas. Est-il possible d'utiliser la zone de texte existante. S'il vous plaît des conseils

Vous voyez, j'ai eu une telle situation avant de mettre en place ces données

enter image description here

Maintenant, lorsque j'applique ce plugin datatables. Une nouvelle zone de texte est ajoutée pour la recherche. Je ne souhaite pas créer une nouvelle zone de texte. Je souhaite que ma zone de texte existante implémente la fonctionnalité de recherche.

javascriptjquerycssdatatablesjquery-datatables
16
Nikhil Agrawal

C'est très simple. Tout d'abord, vous devez masquer le champ de recherche par défaut:

.dataTables_filter {
   display: none;
}

Exemple de votre propre champ de recherche, placé quelque part dans le code HTML:

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

script à rechercher/filtrer lors de la saisie dans le champ de recherche

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

démo de travail -> http://jsfiddle.net/TbrtF/

Si vous utilisez DataTables 1.10, le JS devrait ressembler à ceci:

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

Pour supprimer les options de filtre, vous pouvez utiliser css comme indiqué dans d'autres réponses ou le supprimer lors de l'initialisation du datatable en utilisant:

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

ou en utilisant l'attribut sDom comme ceci:

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

Voir ici http://datatables.net/usage/options#sDom pour plus d'options.

Maintenant, pour utiliser votre propre champ de texte en tant que filtre, associez-y simplement un gestionnaire keypress et utilisez l'option fnFilter comme ceci:

$(document).ready(function() 

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

Vous pouvez définir un nouvel élément newSearchPlace pour avoir le filtre de recherche de la table de données à l'intérieur:

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

Ensuite, placez le filtre de recherche dans ce nouveau lieu:

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

vous pouvez changer le style de la recherche très facilement avec css

en css Fichier: 

.dataTables_filter input {
     background: blue;
}

Avec Javascript

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

Essayez-le en le collant sur votre console.

1
Cracker0dks

Pour la version actuelle de décembre 2018 (v1.10.19), procédez comme suit:

  1. Masquer le champ de recherche par défaut (CSS):

    .dataTables_filter { display: none; }

  2. Ajouter un nouveau filtre à l'endroit souhaité (HTML)

    Search:<br><input type="text" id="searchFilter">

  3. Après votre fonction d'inicialisation des DataTables, vous devez écrire votre fonction de recherche (JS):

    $(document).ready(function() {
   var table = $('#example').DataTable();

$('#searchFilter').on( 'keyup', function () {
   table.search( this.value ).draw();
} );

Remarque : fnfilter est obsolète, utilisez donc search (), mais search () ne redessine pas la table, vous devez donc également utiliser draw ().

0
culter

Oui, vous pouvez faire un cours dans votre css comme:

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

puis ajoutez cette classe à la div de recherche datatable en utilisant jquery ou javascript.

exemple:

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

assurez-vous que votre script est dans la partie principale de votre code HTML.

0
Mack Mack