bootrap Tabelle benutzerdefinierte Suche

Ich habe folgende Tabelle:bootrap Tabelle benutzerdefinierte Suche

<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, 
});

Ich mag folgendes Suchverhalten implementieren: Wenn der Benutzer Suche nach "2001" oder "200.1", dann dem Der erste Eintrag wird angezeigt. sucht der Benutzer nach "10.1234" oder "1", wird erneut der erste Eintrag angezeigt. Hat jemand eine Idee, wie man das umsetzt? Hier ist das Dokument: http://bootstrap-table.wenzhixin.net.cn/documentation/

Quelle

2017-09-01 Lahmacun

Was Sie bisher versucht haben? – lxe

Ich lese die Doumentation: http://bootstrap-table.wenzhixin.net.cn/documentation/ aber kann immer noch nicht herausfinden, wie ich mein Problem lösen kann. – Lahmacun

@Lahmacun, ich habe eine codeply project verknüpft, die die Bootstrap-Tabelle implementiert. All dieser Code kann in der Dokumentation der von Ihnen bereitgestellten Website gefunden werden. Tatsächlich ist die Suchfunktion, nach der Sie suchen, bereits integriert. Sie müssen keinen benutzerdefinierten Code schreiben. Sie müssen es nur aufrufen, indem Sie das Attribut data-search auf true setzen.

HTML-Code:

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

JavaScript-Code:

$('#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' 
    }] 
});

Quelle

2017-09-01 22:32:01 cwanjt

danke für die Zeit. aber es funktioniert immer noch nicht. Wenn ich "2021" eintippe, wird nichts gefunden. Wenn ich "202.1" eintippe, wird der zweite Eintrag angezeigt. Ich möchte, dass der zweite Eintrag angezeigt wird, wenn ich "2021" (ohne Punkt) – Lahmacun

um genau zu sein: Ich möchte, dass der zweite Eintrag gefunden wird, wenn die Eingabe ist "202.1" ODER "2021" – Lahmacun

Sie wie folgt tun können;

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>

war ich ein wenig faul, um eine Schaltfläche, aber auffällige Reiter hinzuzufügen, oder irgendwo aus dem Eingabeelement klicken tun soll.

Hinweis: ~(-1) === 0; Tilde ändert sich -1 zu 0 (falscher Wert)

OK lässt sich mit einem Bootstrap-Beispiel weitermachen. Dieses Mal werden wir eine Klasse für die Zeile definieren, die die Nummer enthält, die wir suchen, und sie zu unserer CSS-Datei hinzufügen. Lass es so etwas wie sein;

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

Wenn wir nun überprüfen alle ersten <td> Elemente in jeder Reihe (die die Anzahldaten enthält). Wenn es nicht enthält, werden wir die .found Klasse aus dem parentElement.classList entfernen (wenn die Klassenliste des Elternelements es nicht hat, wird kein Fehler geworfen), wenn wir finden, wonach wir suchen, werden wir .found Klasse zum Eltern hinzufügen Element-Klassenliste.

Sehr einfach ..

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>

Quelle

2017-09-01 23:43:36 Redu

vielen Dank. das sieht sehr gut aus. Weißt du, wie ich das mit Bootstrap-Tisch kombinieren kann? – Lahmacun

@Lahmacun Ich habe eine Bootstrap-Version angehängt. Sehen Sie, ob es hilft. – Redu

bootrap Tabelle benutzerdefinierte Suche

Antwort

Verwandte Themen