[DataTable] Barre de recherche avec bug

Bonjour,

Je rencontre un souci un peu bizarre sur un DataTable ^^ En effet, la barre de recherche ne fonctionne que lorsque l'on reste cliquer dessus ><

J'ai d'abord penser que j'avais mal placer mon $(mytable).DataTable() (avec mes options) mais non...

Et je n'ai pas de messages d'erreur dans la console de mozilla, je continue de creuser et de vous tenir au courant néanmoins si quelqu'un peut m'éclairer ca serait cool :)

Bonne jurnée à vous !

PS en lien ci dessous ;) :

la page en question : https://Testdatatable--julienbensliman.repl.co

le code : https://repl.it/@JulienBensliman/Testdatatable

Bonjour,

A priori, ça vient de :

Code:

---

<a href="#SMI">

---

:koi:

Salut,

Lorsqu'on inspecte le document on trouvera un truc anormal :

Code:

---

1 2 3 4

<a href="#SMI"> <div class="aff ui-tabs-panel ui-corner-bottom ui-widget-content" id="QT1" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false">.....</div> </a>

---

C'est le <a href="#SMI"> qui pose problème, pour t'assurer que c'est vraiment la source du problème, ajoute un écouteur click sur cette balise <a href="#SMI"> et tu verras que la zone de recherche fonctionne.

Donc la solution est soit de supprimer ce href soit utiliser ce code :

Code:

---

1 2 3 4

$('a[href="#SMI"]').on('click',function(e){ e.preventDefault(); });

---

Trouvé ! 8-)

Code:

---

1 2 3

<ul id="environnements"> ... <li><a href="#SMI">SMI</br>QT & PREPROD & BASCULE</li>

---

Il manque le </a>.


Comme quoi... Ceux qui prétendent que "ce n'est pas la peine de fermer les balises" *... se trompent lourdement.
* Ce qui est vrai pour <li>, <option>,... mais pas pour <a>. La preuve.

jreaux62 bien vu, tu ne rates rien toi :ptdr:

Les deux solutions fonctionnent, mais la tienne est très simple c'est claire.
+1 8-)

Rolalala quel boulet ^^

Merci beaucoup XD :)

A y regarder de plus près...

On écrit <br/>.

Tu trouveras d'autres erreurs sur :

• https://validator.w3.org/

Code:

---

<h2 value="QT1">

---

:koi:
Il vaut mieux utiliser un attribut data-* :

Code:

---

<h2 data-value="QT1">

---

en en jQuery :

Code:

---

lot=$(this).data('value');

---