bootrap Table recherche personnalisée

Je le tableau suivant:bootrap Table recherche personnalisée

<table> 
    <tr> 
    <th>Number</th> 
    <th>Name</th> 
    </tr> 
    <tr> 
    <td>200.10.1234</td> 
    <td>Maria Anders</td> 
    </tr> 
    <tr> 
    <td>202.10.9234</td> 
    <td>Francisco Chang</td> 
    </tr> 

</table>

JS:

$('#table').bootstrapTable({ 
    pagination: true, 
    search: true, 
});

Je veux mettre en œuvre suivant le comportement de recherche: si la recherche d'utilisateur pour "2001" ou "200.1", puis la la première entrée doit être montrée. Si l'utilisateur recherche "10.1234" ou "1", la première entrée doit être affichée. Quelqu'un a-t-il une idée de la façon de l'implémenter? Voici le document: http://bootstrap-table.wenzhixin.net.cn/documentation/

Source

2017-09-01 Lahmacun

Qu'avez-vous essayé jusqu'à présent? – lxe

J'ai lu la documentation: http://bootstrap-table.wenzhixin.net.cn/documentation/ mais je n'arrive toujours pas à résoudre mon problème. – Lahmacun

@Lahmacun, j'ai lié un codeply project qui implémente la table d'amorçage. Vous trouverez tout ce code dans la documentation du site Web que vous avez fourni. En fait, la fonctionnalité de recherche que vous recherchez est déjà intégrée. pas besoin d'écrire un code personnalisé. Vous devez simplement l'appeler en définissant l'attribut data-search sur true.

Code HTML:

<table id="table" data-url="" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true"> 
</table>

code JavaScript:

$('#table').bootstrapTable({ 
    columns: [{ 
     field: 'number', 
     title: 'Number' 
    }, { 
     field: 'name', 
     title: 'Name' 
    }], 
    data: [{ 
     id: 1, 
     number: '200.10.1234', 
     name: 'Maria Anders' 
    }, { 
     id: 2, 
     number: '202.10.9234', 
     name: 'Francisco Chang' 
    }] 
});

Source

2017-09-01 22:32:01 cwanjt

merci pour le temps. mais ça ne marche toujours pas. si je tape "2021" alors rien n'est trouvé. si je tape "202.1" alors la deuxième entrée est montrée. Je veux que la deuxième entrée est affichée si je tape "2021" (sans point) – Lahmacun

pour être exact: je veux que la deuxième entrée sera trouvée si l'entrée est "202.1" OU "2021" – Lahmacun

Vous pouvez le faire comme suit;

var ftds = document.querySelectorAll("tr > td:first-child"), 
 
    choose = document.getElementById("choose"); 
 

 
choose.addEventListener("change", function isChosen(e) { 
 
    ftds.forEach(function(ftd) { 
 
    var dotless = ftd.textContent.replace(/\./g, ""); 
 
    ftd.parentElement.style.backgroundColor = ~ftd.textContent.indexOf(e.target.value) || 
 
     ~dotless.indexOf(e.target.value) ? "green" : "white"; 
 
    }); 
 
});

<table> 
 
    <tr> 
 
    <th>Number</th> 
 
    <th>Name</th> 
 
    </tr> 
 
    <tr> 
 
    <td>200.10.1234</td> 
 
    <td>Maria Anders</td> 
 
    </tr> 
 
    <tr> 
 
    <td>202.10.9234</td> 
 
    <td>Francisco Chang</td> 
 
    </tr> 
 
</table> 
 
<label for="choose">Chose ID:</label> 
 
<input id="choose" required>

J'étais un peu paresseux pour ajouter un bouton mais onglet frappant ou en cliquant quelque part sur l'élément d'entrée devrait faire.

Indice: ~(-1) === 0; changements de tilde -1 à 0 (valeur falsey)

OK laisse continuer avec un exemple Bootstrap. Cette fois, nous allons définir une classe pour la ligne qui contient le numéro que nous cherchons et l'ajouter à notre fichier CSS. Que ce soit quelque chose comme;

.found { 
    outline: #2E8B57 solid 1px; 
    background-color: #98FB98; 
}

Maintenant, si nous vérifions tous les premiers éléments <td> (qui contient les données numériques) dans chaque rangée. Si elle ne contient pas nous allons supprimer la classe .found du parentElement.classList (si la liste de classes de l'élément parent ne l'a pas, aucune erreur ne sera renvoyée) si nous trouvons ce que nous cherchons, alors nous ajouterons la classe .found au parent liste de classe de l'élément.

Très simple ..

var ftds = document.querySelectorAll("tr > td:first-child"), 
 
    choose = document.getElementById("choose"); 
 

 
choose.addEventListener("change", function isChosen(e) { 
 
    ftds.forEach(function(ftd) { 
 
    var dotless = ftd.textContent.replace(/\./g, ""); 
 
    ~ftd.textContent.indexOf(e.target.value) || 
 
    ~dotless.indexOf(e.target.value)   ? ftd.parentElement.classList.add("found") 
 
               : ftd.parentElement.classList.remove("found"); 
 
    }); 
 
});

.found { 
 
    outline: #2E8B57 solid 1px; 
 
    background-color: #98FB98; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <table class="table table-hover"> 
 
     <thead> 
 
     <tr> 
 
      <th>Number</th> 
 
      <th>First Name</th> 
 
      <th>Last Name</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>200.10.1234</td> 
 
      <td>Maria</td> 
 
      <td>Anders</td> 
 
     </tr> 
 
     <tr> 
 
      <td>202.10.9234</td> 
 
      <td>Fransisco</td> 
 
      <td>Chang</td> 
 
     </tr> 
 
     <tr> 
 
      <td>203.10.5678</td> 
 
      <td>Fabrio</td> 
 
      <td>Donetti</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
    <label for="choose">Search ID:</label> 
 
    <input id="choose" required> 
 
</body> 
 

 
</html>

Source

2017-09-01 23:43:36 Redu

merci beaucoup. ça a l'air très bien. Savez-vous comment je peux combiner cela avec la table de bootstrap? – Lahmacun

@Lahmacun J'ai joint une version Bootstrap. Voir si ça aide. – Redu

bootrap Table recherche personnalisée

Répondre

Questions connexes