Filter-HTML-Tabelle mit jQuery

Erstelle ich eine Vergleichstabelle über Breitband und möchten fügen Sie einige jQuery-UI-Slider an der Spitze der Tabelle, die es Ihnen ermöglichen, die Daten zu filtern, basierend auf der Download-Auslastung, Geschwindigkeit, etc..

Zum Beispiel, wenn ich schieben Sie den Schieberegler, um die 20GB nur die Zeilen, die download-Nutzung von 20 GB und mehr werden gezeigt. Ist das möglich?

Möchte ich diese Funktionalität hinzufügen, um die Tabelle zu Sortieren: http://jqueryui.com/demos/slider/#rangemin

Oder wenn das nicht möglich ist dann ein drop-down-wäre fein. Wenn ich ziehen Sie die Daten per ajax, dann wäre das auch in Ordnung.

Hier ist mein code für die Tabelle mit 1 Zeile.

<table>

<thead>
    <tr>
        <th class="bestseller"></th>
        <th class="device"></th>
        <th class="logo"></th>
        <th class="package">Bestsellers</th>
        <th class="speed">Speed</th>
        <th class="data">Data</th>
        <th class="term">Term</th>
        <th class="price">Price</th>
        <th class="button"></th>
    </tr>
</thead>

<tbody>

    <tr>
        <td class="bestseller">1</td><td class="device"><img alt="Dongle" class="dongle" src="images/dongles/three.png"></td>
        <td class="logo"><img alt="Logo" src="images/three.png"></td>
        <td class="package"><div class="name">Three Standard Broadband</div><div class="info">Great deal including a free dongle.</div></td>
        <td class="speed"><div class="upto">up to</div>7.2Mbps</td>
        <td class="data">15GB</td>
        <td class="term">24<div class="months">Month(s)</div></td>
        <td class="price">£15.99</td>
        <td class="button"><div class="deal">See Deal</div></td>
    </tr>
</tbody>

</table>
  • Es ist definitiv möglich. Was haben Sie versucht?
  • Ich habe versucht, dies umzusetzen blog.joshsoftware.com/2011/09/28/..., aber konnte nicht herausfinden, wie ich die Ausgabe der Daten.
  • Wie groß ist die Tabelle? Was für ein Tisch-plugin benutzt du(wenn überhaupt?) welche version von jQuery? Brauchen Sie, um filter mit AJAX, oder würde inline-Filter reicht?
  • Es gibt mehrere Tabellen mit über 20 Zeilen, Keine Tabelle-plugin verwendet wird, jQuery 1.7 ist das, was Im mit. Inline-Filter wäre genug, es sei denn ajax wäre einfacher?
  • Inline-Filter wäre ziemlich einfach.
  • Würden Sie in der Lage sein, geben Sie mir ein Beispiel dafür?

InformationsquelleAutor plugs | 2012-02-01
  1. 3

    Hier ist ein funktionierendes Beispiel:
    http://jsfiddle.net/EKpGk/

    <table>
<thead>
    <tr>
        <th>Name</th>
        <th>Price</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Super Phone</td>
        <td class="price">£15.99</td>
    </tr>
    <tr>
        <td>Wonder Phone</td>
        <td class="price">£25.99</td>
    </tr>
</tbody>
</table>

<br/>

Filter - enter minimum price:

<input type='text' id='filter' />

<button id='btnFilter'>Go</button>

    Javascript (Benötigt JQuery)

    $('#btnFilter').click(function() {

    var price = $('#filter').val();

    $('tr').show();

    $('tr td.price').each(function() {
        if ($(this).text().substring(1) < price)
        {
            $(this).parent().hide();
        }
    });

});

    Dieser code ist ein basic Weg zu filtern. Das substring(1) entfernt die £ vom Preis. Es blendet alle Zeilen, deren Preis weniger als das, was Sie eingeben. Ich hoffe, Sie können es anpassen, um Ihr problem zu lösen:)

    • Ich habe gerade versucht diesen code und es scheint nicht zu funktionieren, komisch...
    • Es ist nur pseudocode, ich Schreibe ein funktionierendes Beispiel
    • JSFiddle ist so lächerlich langsam ist in diesen Tagen...
    • Mal ein JSFiddle und dachte die gleiche Sache! jsfiddle.net/fKn2u/10
    • Aktualisiert mit einer Lösung
    • Danke, werde ausprobieren! p.s Kann es sein max Preis?
    • Ich habe Feste code: jsfiddle.net/fKn2u/16 - added einfach die Teilstrings entfernen Sie die £ und fixierte eine fehlende schließende Klammer nach Ihrer inneren Funktion 🙂
    • Ändern Sie einfach die < rund oder fügen Sie Ihre eigenen Logik zu ändern, wie es die Filter 🙂
    • Ich habe erfolgreich Hinzugefügt, in diesem Beispiel " o mein Tisch und fügte hinzu, ein regler, aber wenn Sie gehen, unten 10 alle Zeilen zählen, die die einzelne Ziffer angezeigt?

    InformationsquelleAutor NibblyPig
Schreibe einen Kommentar