Darstellung verfeiner

[Jnnbo]

Moin,

ich muss meine Kundenübersicht leider etwas umstellen, da immer mehr Optionen hinzukommen und mir der Platz ausgeht. Ich habe mich nun entschlossen ein paar Optionen via Checkboxen ein bzw. auszublenden z.B.

• Alle Kunden die nicht mehr angerufen werden wollen
• Alle Kunden die eine Notiz hinterlegt haben

Ob ein Kunde nicht mehr angerufen werden möchte, sehe ich in diesem Feld $array['kd_status'], wenn da eine 1 drin steht, ist dieser gesperrt.

Ob bei einem Kunden einen Notiz hinterlegt ist, sehe ich an diesem Feld $array['kd_notiz'] wenn der dieses leer ist, ist auch keine Notiz hinterlegt.

Meine "einfache" Übersicht funktioniert auch schon, dazu habe ich folgende Funktion:

	function kundenUebersicht($mysqli, $UserCode=false, $UserRechte=false) {
		$select = "SELECT 
						kd_id, 
						kd_code, 
						kd_userID, 
						kd_status, 
						kd_firma, 
						kd_anrede, 
						kd_name, 
						kd_vorname, 
						kd_zusatz, 
						kd_strasse, 
						kd_plz, 
						kd_ort, 
						kd_telefon, 
						kd_handy, 
						kd_fax, 
						kd_email, 
						kd_url, 
						kd_packstationen, 
						kd_notiz, 
						kd_ip, 
						kd_datum, 
						ud_Uid, 
						ud_vorname, 
						ud_name, 
						user_code, 
						user_type 
					
			FROM web_kunden
			LEFT JOIN web_users_detail ON web_users_detail.ud_Uid = web_kunden.kd_userID
			LEFT JOIN web_users ON web_users.user_code = web_kunden.kd_userID";

   if ($UserRechte == 'mitarbeiter') {
		
	if ($UserCode) {
		$stmt = $mysqli->prepare($select . " WHERE kd_userID =? ORDER by kd_id DESC" );
			$stmt->bind_param("s", $UserCode);
			} else {
			$stmt = $mysqli->prepare($select);
			}
		
		} else {
			$stmt = $mysqli->prepare($select . " ORDER by kd_id DESC" );
			}
		$stmt->execute();
[....]

Mein "kleines" Formular sieht so aus

<form name="form1" method="post" action="">
  <p>
    <input type="checkbox" name="gesperrt" id="gesperrt" value="1">
    <label for="gesperrt">Kunde gesperrt</label>
    <br>
<input type="checkbox" name="notizen" id="notizen">
    <label for="notizen">mit Notizen</label>
  </p>
</form>

Ist es sinnvoll ein Sende Button hinzufügen oder kann man es auch nur mit einem Klick auslösen? Mir persönlich wäre ohne lieber.

Der zweite Punkt ist, benötige ich für diese zwei Optionen zwei extra abfragen oder kann ich dieses mit in eine einbauen?

[bubble]

<form name="form1" method="post" action="">
  <p>
    <input type="checkbox" name="gesperrt" id="gesperrt" value="1">
    <label for="gesperrt">Kunde gesperrt</label>
    <br>
<input type="checkbox" name="notizen" id="notizen">
    <label for="notizen">mit Notizen</label>
  </p>
</form>

Ist es sinnvoll ein Sende Button hinzufügen oder kann man es auch nur mit einem Klick auslösen? Mir persönlich wäre ohne lieber. Der zweite Punkt ist, benötige ich für diese zwei Optionen zwei extra abfragen oder kann ich dieses mit in eine einbauen?

Wenn ich jetzt nichts überlesen habe, zielt deine Frage eigentlich nur auf das Formular ab. Du könntest im Click-Event des jeweiligen Radiobutton-Elements das Formular absenden, aber warum dann nicht gleich Button-Elemente verwenden? (Das p-Element ist nebenbei überflüssig, benutz einfach CSS um das padding zu bewerkstelligen)

MfG bubble

[Jnnbo]

Hallo bubble,

Wenn ich jetzt nichts überlesen habe, zielt deine Frage eigentlich nur auf das Formular ab. Du könntest im Click-Event des jeweiligen Radiobutton-Elements das Formular absenden, aber warum dann nicht gleich Button-Elemente verwenden?

Um das Formular geht es mir auch, wie gesagt ich bin noch am überlegen ob ich es mit einem Button abschicke oder bereits wenn man auf die Checkbox blickt. Mir geht es aber viel mehr darum, ob ich diese "Verfeinerung" mit der gleichen Funktion machen kann oder ob ich dafür eine komplett neue Funktion benötige?

(Das p-Element ist nebenbei überflüssig, benutz einfach CSS um das padding zu bewerkstelligen)

Das ganze Design ist noch überhaupt nicht gemacht, wie <p> werden von meinem Editor selber eingefügt, ist mir zu mühsam jedesmal wieder zu löschen, das macht später meine Freundin wenn die sich an das Design setzt.

[bubble]

Ich hab Punkt 2 vergessen: Du kannst dem Submit-Button-Element auch einen Wert via value-Attribut mitgeben, dass dan serverseitig ausgewertet werden kann. Gleiches würde auch mit dem Click-Event stattfinden, da dann der Wert des jeweiligen Radio-Button-Elements mitgeliefert wird. Nach wie vor seh ich bei der Radio-Button-Variante allerdings eher einen "Missbrauch" der Elemente vor und empfehle die Button-Variante

MfG bubble

[Jnnbo]

Hallo bubble,

Nach wie vor seh ich bei der Radio-Button-Variante allerdings eher einen "Missbrauch" der Elemente vor und empfehle die Button-Variante

ich rede ja auch nicht von Radio-Buttons sondern von der jeweiligen Checkbox. Ist der Hacken in der jeweiligen Checkbox gesetzt soll die Auflistung verfeinert werden.

[bubble]

Nach wie vor seh ich bei der Radio-Button-Variante allerdings eher einen "Missbrauch" der Elemente vor und empfehle die Button-Variante ich rede ja auch nicht von Radio-Buttons sondern von der jeweiligen Checkbox. Ist der Hacken in der jeweiligen Checkbox gesetzt soll die Auflistung verfeinert werden.

Das ist mir bei deiner ersten Antwort auch aufgefallen. Verwerf mal alles was ich bisher geschrieben hab.

Einen Submit-Button wirst du brauchen, da du nicht alle 3 Varianten mit einem Click bewerkstelligen kannst (mit 2 Checkboxen). Die SQL-Anfrage musst du dann halt serverseitig zusammen bauen, das ist zwar (wahrscheinlich) etwas mehr Schreibarbeit aber auf jeden Fall übersichtlicher als eine ewig lange Abfrage. (Und die ist schon so lang genug)

MfG bubble

[Jnnbo]

Hallo bubble,

Einen Submit-Button wirst du brauchen, da du nicht alle 3 Varianten mit einem Click bewerkstelligen kannst (mit 2 Checkboxen).

wenn ich es auch nicht gerne habe mit dem Button, habe ich diesen nun hinzugefügt

        <div class="kunden_optionen">
          <form name="form1" method="post" action="">
            <p>
                <input type="checkbox" name="gesperrt" id="gesperrt" value="1">
                <label for="gesperrt">Kunde gesperrt</label>
                <br>
                <input type="checkbox" name="notizen" id="notizen">
                <label for="notizen">mit Notizen</label>
              </p>
            <input type="submit" name="senden" id="senden" value="Senden">
            </form>
        </div>

Ich vergleiche oft mit eBay z.B. da kann man solche Optionen ohne Button betätigen :) OK, da sind auch Profis am Werk.

Die SQL-Anfrage musst du dann halt serverseitig zusammen bauen, das ist zwar (wahrscheinlich) etwas mehr Schreibarbeit aber auf jeden Fall übersichtlicher als eine ewig lange Abfrage. (Und die ist schon so lang genug)

Das heißt also ich muss dem Aufruf meiner Funktion

$kundenUebersicht = kundenUebersicht($mysqli, $object->user_code, $object->user_type);

noch weitere Paramter mitgeben, richtig? Also z.B. so?

$gesperrt = htmlspecialchars($_POST['titel']);
$notizen = htmlspecialchars($_POST['notizen']);

$kundenUebersicht = kundenUebersicht($mysqli, $object->user_code, $object->user_type, $gesperrt, $notizen);

[Jnnbo]

Hallo bubble,

ok, ich bin ein Schritt weiter gekommen, mein Code sieht nun so aus

        <div class="kunden_optionen">
          <form name="form1" method="post" action="">
            <p>
                <input type="checkbox" name="gesperrt" id="gesperrt" value="1">
                <label for="gesperrt">Kunde gesperrt</label>
                <br>
                <input type="checkbox" name="notizen" id="notizen">
                <label for="notizen">mit Notizen</label>
              </p>
            <input type="submit" name="abschicken" id="abschicken" value="Senden">
            </form>
        </div>

Aufruf der Funktion

$gesperrt = NULL;
$notizen = NULL;

if(isset($_POST['abschicken'])){
			
	if(!empty($_POST['gesperrt'])) { $gesperrt = htmlspecialchars($_POST['gesperrt']); }
	if(!empty($_POST['notizen'])) { $notizen = htmlspecialchars($_POST['notizen']); }
		}
		
$kundenUebersicht = kundenUebersicht($mysqli, $object->user_code, $object->user_type , $gesperrt, $notizen);

Und meine Funktion dann so

function kundenUebersicht($mysqli, $UserCode=false, $UserRechte=false, $gesperrt=false, $notizen=false) {
		$select = "SELECT 
						kd_id, 
						kd_code, 
						kd_userID, 
						kd_status, 
						kd_firma, 
						kd_anrede, 
						kd_name, 
						kd_vorname, 
						kd_zusatz, 
						kd_strasse, 
						kd_plz, 
						kd_ort, 
						kd_telefon, 
						kd_handy, 
						kd_fax, 
						kd_email, 
						kd_url, 
						kd_packstationen, 
						kd_notiz, 
						kd_ip, 
						kd_datum, 
						ud_Uid, 
						ud_vorname, 
						ud_name, 
						user_code, 
						user_type 
					
FROM web_kunden
LEFT JOIN web_users_detail ON web_users_detail.ud_Uid = web_kunden.kd_userID
LEFT JOIN web_users ON web_users.user_code = web_kunden.kd_userID";

		if ($UserRechte == 'mitarbeiter') {
		
			if ($UserCode) {
				$stmt = $mysqli->prepare($select . " WHERE kd_userID =? ORDER by kd_id DESC" );
				$stmt->bind_param("s", $UserCode);
			} else {
				$stmt = $mysqli->prepare($select);
			}
		
		}
		elseif ($gesperrt == '1') {
				$stmt = $mysqli->prepare($select . " WHERE kd_status =?" );			
				$stmt->bind_param("s", $gesperrt);
		}
		 else {
				$stmt = $mysqli->prepare($select . " ORDER by kd_id DESC" );
			}
		
		$stmt->execute();
[....]

Wie müsste dieser Code lauten um alle Einträge zu erhalten die im Feld "kd_notiz " nicht leer sind?

elseif ($notizen == '1') {
		$stmt = $mysqli->prepare($select . " WHERE kd_notiz =?" );			
		$stmt->bind_param("s", $notizen);
}

[Jnnbo]

Hallo bubble,

Wie müsste dieser Code lauten um alle Einträge zu erhalten die im Feld "kd_notiz " nicht leer sind?

elseif ($notizen == '1') {
		$stmt = $mysqli->prepare($select . " WHERE kd_notiz =?" );			
		$stmt->bind_param("s", $notizen);
}

ok, dieses geht wohl so

elseif ($notizen == '1') {
	$stmt = $mysqli->prepare($select . " WHERE kd_notiz > ''" );			
}

Jetzt muss ich noch schauen, was ist, wenn beide Felder angeklickt sind :/

[MudGuard]

Hi,

> 	if(!empty($_POST['gesperrt'])) { $gesperrt = htmlspecialchars($_POST['gesperrt']); }
> 	if(!empty($_POST['notizen'])) { $notizen = htmlspecialchars($_POST['notizen']); }

Die Variablen $gesperrt und $notizen sind jetzt also für die Ausgabe in HTML-Code vorbereitet dank htmlspecialchars.

> $kundenUebersicht = kundenUebersicht($mysqli, $object->user_code, $object->user_type , $gesperrt, $notizen);

Das sieht erstmal (schon wegen $mysqli) nicht nach HTML-Ausgabe aus.

> function kundenUebersicht($mysqli, $UserCode=false, $UserRechte=false, $gesperrt=false, $notizen=false) {

[...]


> 		elseif ($gesperrt == '1') {
> 				$stmt = $mysqli->prepare($select . " WHERE 

kd_status =?" );			

> 				$stmt->bind_param("s", $gesperrt);

$gesperrt wird hier ja gar nicht für die HTML-Ausgabe verwendet. Was sollte das also mit dem htmspecialchars?

> elseif ($notizen == '1') {
> 		$stmt = $mysqli->prepare($select . " WHERE kd_notiz =?" );			
> 		$stmt->bind_param("s", $notizen);
> }

Auch $notizen wird nicht für HTML-Ausgabe benutzt. Also auch hier unsinnigerweise mit htmlspecialchars verhunzt ...

cu,
Andreas a/k/a MudGuard

[Jnnbo]

Hallo MudGuard,

Die Variablen $gesperrt und $notizen sind jetzt also für die Ausgabe in HTML-Code vorbereitet dank htmlspecialchars.

habe ich wieder entfernt

$gesperrt = NULL;
$notizen = NULL;

if(isset($_POST['abschicken'])){
	if(!empty($_POST['gesperrt'])) { $gesperrt = $_POST['gesperrt']; }
	if(!empty($_POST['notizen'])) { $notizen = $_POST['notizen']; }
		}
$kundenUebersicht = kundenUebersicht($mysqli, $object->user_code, $object->user_type , $gesperrt, $notizen);

Weiterhin habe ich aber hier das Problem, dass die dritte Anweisung nicht geht

elseif ($gesperrt == '1') {
		$stmt = $mysqli->prepare($select . " WHERE kd_status =? ORDER by kd_id DESC" );			
		$stmt->bind_param("s", $gesperrt);
}
elseif ($notizen == '1') {
		$stmt = $mysqli->prepare($select . " WHERE kd_notiz > '' ORDER by kd_id DESC" );			
}
elseif ($gesperrt == '1' && $notizen == '1') {
		$stmt = $mysqli->prepare($select . " WHERE kd_status =? AND kd_notiz > ''" );			
		$stmt->bind_param("s", $gesperrt);
		}
else {
		$stmt = $mysqli->prepare($select . " ORDER by kd_id DESC" );
}

[MudGuard]

Hi,

Weiterhin habe ich aber hier das Problem, dass die dritte Anweisung nicht geht

> elseif ($gesperrt == '1') {
> }
> elseif ($notizen == '1') {
> }
> elseif ($gesperrt == '1' && $notizen == '1') {
> }

sonst, falls $gesperrt == '1' , mach was.
sonst (also wenn $gesperrt != '1' ist), falls $notizen == '1' ist, mach was.
sonst (also wenn $gesperrt != '1' und $notizen != '1' ist), falls $gesperrt == '1' - ups, das geht ja nicht - und `$notizen == '1' - ups, das geht ja auch nicht - mach was.

Falls $gesperrt == '1' ist, wird der erste der hier zitierten Zweige ausgeführt. Alle anderen kommen nicht dran.

Gleiches, wenn $notizen == '1' (und $gesperrt != '1') ist, dann kommt der zweite Zweig dran. Alle anderen kommen nicht dran.

zu dem elseif mit ($gesperrt == '1' && $notizen == '1') kommt der Interpreter also nur, wenn sowohl $gesperrt != '1' ist als auch $notizen != '1' ist. Und in dem Fall kann die Bedingung nicht erfüllt sein.

Auf die Reihenfolge kommt es an ...

cu,
Andreas a/k/a MudGuard

[Jnnbo]

Hallo MudGuard,

zu dem elseif mit ($gesperrt == '1' && $notizen == '1') kommt der Interpreter also nur, wenn sowohl $gesperrt != '1' ist als auch $notizen != '1' ist. Und in dem Fall kann die Bedingung nicht erfüllt sein.

vielen Dank für die Erklärung, ich habe es nun gedreht und es funktioniert

elseif ($gesperrt == '1' && $notizen == '1') {
   $stmt = $mysqli->prepare($select . " WHERE kd_status =? AND kd_notiz > ''" );			
   $stmt->bind_param("s", $gesperrt);
}

elseif ($gesperrt == '1') {
   $stmt = $mysqli->prepare($select . " WHERE kd_status =? ORDER by kd_id DESC" );			
   $stmt->bind_param("s", $gesperrt);
}

elseif ($notizen == '1') {
   $stmt = $mysqli->prepare($select . " WHERE kd_notiz > '' ORDER by kd_id DESC" );			
}

else {
   $stmt = $mysqli->prepare($select . " ORDER by kd_id DESC" );
}

[BaBa]

Hallo,

ich muss meine Kundenübersicht leider etwas umstellen, da immer mehr Optionen hinzukommen und mir der Platz ausgeht. Ich habe mich nun entschlossen ein paar Optionen via Checkboxen ein bzw. auszublenden z.B.

Ich habe die Antworten gelesen und möchte noch einen Weg über das Frontend vorschlagen. Ich würde es so machen, dass ich die php Funktion gar nicht anfasse und nur in die Ausgabe sowas integriere wie

<tr class='user kein-anruf notizen'> 

Im Falle, dass eben die entsprechenden Werte gesetzt sind in der DB. Dann per CSS

.user.kein-anruf, user.notizen{display:none}

per default ausblenden und einfache html-Schalter mit e.g. jQuery zum ein- bzw. ausblenden der jew. Zeilen erstellen:

<a id="toggle-kein-anruf" class="btn-default" role="button">Anruf</a>

$(function(){
  $("#toggle-kein-anruf").click(function(){
    $(".user.kein-anruf").toggle();
    $(this).toggleClass("btn-default btn-error");
});

Cheers,
BaBa

[Jnnbo]

Guten Morgen BaBa,

Ich habe die Antworten gelesen und möchte noch einen Weg über das Frontend vorschlagen. Ich würde es so machen, dass ich die php Funktion gar nicht anfasse und nur in die Ausgabe sowas integriere wie

<tr class='user kein-anruf notizen'> 

Im Falle, dass eben die entsprechenden Werte gesetzt sind in der DB. Dann per CSS

.user.kein-anruf, user.notizen{display:none}

per default ausblenden und einfache html-Schalter mit e.g. jQuery zum ein- bzw. ausblenden der jew. Zeilen erstellen:

<a id="toggle-kein-anruf" class="btn-default" role="button">Anruf</a>

$(function(){
  $("#toggle-kein-anruf").click(function(){
    $(".user.kein-anruf").toggle();
    $(this).toggleClass("btn-default btn-error");
});

vielen Dank für den tollen Vorschlag, ich werde gleich mal versuchen diesen umzusetzen. Damit müsste ich meine Seite auch nicht ständig neu laden.

[Matthias Apsel]

Hallo Jnnbo,

<a id="toggle-kein-anruf" class="btn-default" role="button">Anruf</a>

Und wenn du nichts verlinken möchtest, brauchst du auch kein a-Element.

<button type="button" id="toggle-kein-anruf" class="btn-default">Anruf</button>

Siehe wiki/Button#Clientseitige Aktionen auslösen

Bis demnächst
Matthias

[BaBa]

vielen Dank für den tollen Vorschlag, ich werde gleich mal versuchen diesen umzusetzen. Damit müsste ich meine Seite auch nicht ständig neu laden.

Exakt. Es hat also Vorteile für Nutzer und Betreiber. Es ist nichts verkehrt daran, diese Logik ins Frontend zu verlagern.

Fertige Lösungen, die auch für große Datenmengen performant sind, e.g. eine Pagination mitbringen und sich auch komfortable filtern lassen gibt es auch: dataTables mit Filter (unter der Tabelle). Aber selberbauen hat natürlich auch was :)

Cheers,
BaBa

[Jnnbo]

Hallo BaBa,

Fertige Lösungen, die auch für große Datenmengen performant sind, e.g. eine Pagination mitbringen und sich auch komfortable filtern lassen gibt es auch: dataTables mit Filter (unter der Tabelle). Aber selberbauen hat natürlich auch was :)

wow, mit diesem https://www.datatables.net/examples/api/multi_filter_select.html Script wären alle meine Probleme gelöst :) Hier hätte ich eine vernüftige Suche, eine Sortierung und eine Pagination (hab vor ein paar Tagen schon einmal gefragt, wie ich das umsetzten könnte, leider keine Antwort erhalten, was auch an mir liegt/lag)

[Jnnbo]

Hallo BaBa,

Ich habe die Antworten gelesen und möchte noch einen Weg über das Frontend vorschlagen. Ich würde es so machen, dass ich die php Funktion gar nicht anfasse und nur in die Ausgabe sowas integriere wie

<tr class='user kein-anruf notizen'> 

Im Falle, dass eben die entsprechenden Werte gesetzt sind in der DB. Dann per CSS

.user.kein-anruf, user.notizen{display:none}

per default ausblenden und einfache html-Schalter mit e.g. jQuery zum ein- bzw. ausblenden der jew. Zeilen erstellen:

<a id="toggle-kein-anruf" class="btn-default" role="button">Anruf</a>

$(function(){
  $("#toggle-kein-anruf").click(function(){
    $(".user.kein-anruf").toggle();
    $(this).toggleClass("btn-default btn-error");
});

ich habe mir das ganze etwas genauer angesehen und versucht umzusetzten: http://jsfiddle.net/hz89mdL9/ funktioniert auch, aber wäre es möglich, dass ich zu Beginn alle Einträge sehe und durch Klick die z.B. kein Rückruf wünschen ausblende?

Mein zweites Problem, ich möchte z.B. sagen zeige mir alle die kein Rückruf haben wollen und von diesen dann nochmals die, die keine Notiz haben, das heißt ich muss zwei Buttons betätigen und der zweite muss auf den ersten Rücksicht nehmen.

Ich hoffe du verstehst was ich meine.

[BaBa]

Hey,

ich habe mir das ganze etwas genauer angesehen und versucht umzusetzten: http://jsfiddle.net/hz89mdL9/ funktioniert auch, aber wäre es möglich, dass ich zu Beginn alle Einträge sehe und durch Klick die z.B. kein Rückruf wünschen ausblende?

Ja. Und da wir es mit toggle() gemacht haben ist nur EINE Änderung nötig: Lösche die css Zeile

.user.kein-anruf, user.notizen{display:none}

Voilá.

Mein zweites Problem, ich möchte z.B. sagen zeige mir alle die kein Rückruf haben wollen und von diesen dann nochmals die, die keine Notiz haben, das heißt ich muss zwei Buttons betätigen und der zweite muss auf den ersten Rücksicht nehmen.

Du musst zwei Buttons nehmen, wenn Du die Sachen getrennt schalten können möchtest. Du kannst einen nehmen, wenn Du IMMER von dir genannte Filterung anwenden möchtest. Du kannst ja mal überlegen, was logisch geschehen muss :) Ich sag Dir gerne, wie ich es machen würde.

Cheers,
BaBa

[Jnnbo]

Hallo BaBa,

Ja. Und da wir es mit toggle() gemacht haben ist nur EINE Änderung nötig: Lösche die css Zeile
.user.kein-anruf, user.notizen{display:none} Voilá.

Cool Danke, hat auf Anhieb geklappt :))

Du musst zwei Buttons nehmen, wenn Du die Sachen getrennt schalten können möchtest. Du kannst einen nehmen, wenn Du IMMER von dir genannte Filterung anwenden möchtest. Du kannst ja mal überlegen, was logisch geschehen muss :) Ich sag Dir gerne, wie ich es machen würde.

Ich kann dir jetzt einfach mal sagen, wie ich es gerne hätte bzw. wie ich es von Programmen gewohnt bin, vielleicht lässt sich dieses ja umsetzten:

• Zuerst sind alle zu sehen (habe ich ja duch löschen der CSS Zeile erreicht)
• Mit Klick auf den ersten Button werden alle ausgeblendet, die angerufen werden möchten
• Mit einem weiteren klick, wird diese Auswahl verfeinert die die Option Notiz hinterlegt haben.

Hoffe es ist verständlich rüber gekommen. Danke für deine Hilfe.

[BaBa]

• Zuerst sind alle zu sehen (habe ich ja duch löschen der CSS Zeile erreicht)
• Mit Klick auf den ersten Button werden alle ausgeblendet, die angerufen werden möchten
• Mit einem weiteren klick, wird diese Auswahl verfeinert die die Option Notiz hinterlegt haben.

Das beschreibt eine Vorgehensweise in der Anwendung aber keine Logik.

Ich würde folgendes Vorschlagen:

• Die Filter erzeugen eine Klasse "filter-xyz-active" im <table> Element.
• Ist die Klasse "filter-active-xyz" im <table> vorhanden, werden <tr> Elemente mit xyz ausgeblendet.
• Weiterhin erzeugt die Klasse filter-active im Button selber eine Änderung seines Beschriftungstextes.

Hier ist Dein Fiddle.

Bitte sieh es Dir genau an, damit Du verstehst, was es macht.

Die Hierarchi wurde jetzt komplett umgedreht. Die Buttons bestimmen Klassen, die die Anzeige regeln. Vorher haben die Buttons die Anzeige geregelt. Bei zwei Buttons war die vorherige Lösung nicht mehr tragbar.

Cheers,
BaBa

[Jnnbo]

Hallo BaBa,

Hier ist Dein Fiddle. Bitte sieh es Dir genau an, damit Du verstehst, was es macht.

vielen vielen Dank für deine Hilfe. Wahnsinn was man alles nur mit JavaScript und CSS machen kann.

Gibt es vor bzw. Nachteile dieses nur durch CSS umzusetzen und nicht auf PHP zu setzten wie ich es gestern Abend erst vor hatte?

Lassen wir mal die Option, ja ein User könnte dieses ja abgeschalten haben, außen vor, da nur ich bzw. meine Freundin und Nachbarin auf die Seite zugreifen können.

[BaBa]

Gibt es vor bzw. Nachteile dieses nur durch CSS umzusetzen und nicht auf PHP zu setzten wie ich es gestern Abend erst vor hatte?

Vorteil:

• schnell für den Nutzer (Seitenrefresh entfällt)
• ressourcensparend für den Betreiber (weniger Traffic)
• einfach umzusetzen
• einfach erweiterbar (zusätzliche Filter einfach umzusetzen)

Nachteil:

• bei sehr großen Datenmengen könnte der Browser Performanceprobleme bekommen. In diesem Fall bietet es sich sowieso an, nur einen Teil der Daten zu laden. Diese Möglichkeit versteht sich aber als "Zusatz" zur gegebenen Lösung.

Danke für die Votes :=)

Lassen wir mal die Option, ja ein User könnte dieses ja abgeschalten haben, außen vor, da nur ich bzw. meine Freundin und Nachbarin auf die Seite zugreifen können.

Das hört man sowieso immer seltener. Weißt Du, wie Du bei Deinem Browser Javascript deaktivierst?

Cheers,
BaBa

[Jnnbo]

Hallo BaBa,

• einfach umzusetzen

Wer sich mit JS auskennt dann ja, ich kenne mich damit so gut wie gar nicht aus. Nur mal so aus Neugiere, wäre es möglich den betätigten Button z.B. mit einer anderen Hintergrundfarbe zu versehen? Dass man sieht welcher Filter derzeit aktiv ist?

• einfach erweiterbar (zusätzliche Filter einfach umzusetzen)

Das heißt ich könnte rein technisch noch weitere Optionen einbauen und eben dementsprechend Klassen vergeben?

Danke für die Votes :=)

Für fachliche und freundliche Hilfe vote ich sehr gerne :)

Das hört man sowieso immer seltener. Weißt Du, wie Du bei Deinem Browser Javascript deaktivierst?

Jupp in den Entwicklerwerkzeuge siehe Bild

[BaBa]

Wer sich mit JS auskennt dann ja, ich kenne mich damit so gut wie gar nicht aus.

Du wirst lachen, aber ich kenne mich fast null mit JS aus. Ich bin aber ziemlich gut in jQuery. Aber Du hast recht, man muss natürlich wissen was geht.

Nur mal so aus Neugiere, wäre es möglich den betätigten Button z.B. mit einer anderen Hintergrundfarbe zu versehen? Dass man sieht welcher Filter derzeit aktiv ist?

Na klar. Deiner Phantasie sind keine Grenzen gesetzt. Das hatte ich auch ursprünglich im Sinn, als ich toggleClass("btn-default btn-error") auf dem Button ausführte. Ich persönlich mag es nicht so sehr, wenn sich die Beschriftungstexte ändern. Warum? Erstens, weil sich dann was im Interface "bewegt" und verändert was eigentlich starr sein könnte. Und zweitens weil der User m.M.n mehr überlegen muss da die Dynamik dazu führt, dass er verwirrt wird. Ich arbeite auch lieber visuell, z.B. einer Hintergrundfarbe, die "deaktiviert" suggeriert.

toggleClass("btn-default btn-error") macht genau das. Toggle heißt soviel, wenn es da ist, entferne es und wenn es nicht da ist erzeuge es. Also, wenn der Button die Klasse btn-default hat, entferne sie. Da der Button keine Klasse btn-error hat, füge sie hinzu. Man kann also sagen, tausche die Klasse btn-default gegen btn-error aus. btn-error, da ich gerade an Bootstrap gedacht habe. Achtung: man soll natürlich kein semantisch falsches error verwenden, wenn man nur an der Farbe interessiert ist!

Das heißt ich könnte rein technisch noch weitere Optionen einbauen und eben dementsprechend Klassen vergeben?

Aber klar. Ist jetzt ja alles dafür vorbereitet. Erweitere einfach das Markup um die Buttons und die Klassen im tr und die CSS-Regeln.

Für fachliche und freundliche Hilfe vote ich sehr gerne :)

Danke für das gute Fiddle als Start. Ohne dies hätte ich wohl nicht (so) geantwortet.

Das hört man sowieso immer seltener. Weißt Du, wie Du bei Deinem Browser Javascript deaktivierst? Jupp in den Entwicklerwerkzeuge siehe Bild

Gut, damit gehörst Du zu den 0.2% die das wissen. Zahl geschätzt :).

Cheers,
BaBa

[Jnnbo]

Hallo BaBa,

Na klar. Deiner Phantasie sind keine Grenzen gesetzt. Das hatte ich auch ursprünglich im Sinn, als ich toggleClass("btn-default btn-error") auf dem Button ausführte. Ich persönlich mag es nicht so sehr, wenn sich die Beschriftungstexte ändern. Warum? Erstens, weil sich dann was im Interface "bewegt" und verändert was eigentlich starr sein könnte. Und zweitens weil der User m.M.n mehr überlegen muss da die Dynamik dazu führt, dass er verwirrt wird. Ich arbeite auch lieber visuell, z.B. einer Hintergrundfarbe, die "deaktiviert" suggeriert.

So, ich habe mein bzw. dein Beispiel nochmals etwas überarbeitet: http://jsfiddle.net/hz89mdL9/6/

Nach einem Klick, sehe ich allerdings beide Klassen "btn-default btn-error" ich habe das Gefühl, ich habe nicht ganz verstanden was du meinst. Vielleicht hast du ja nochmals Zeit mir ds zu zeigen bzw. zu erklären.

[Jnnbo]

Hallo BaBa,

So, ich habe mein bzw. dein Beispiel nochmals etwas überarbeitet: http://jsfiddle.net/hz89mdL9/6/

Nach einem Klick, sehe ich allerdings beide Klassen "btn-default btn-error" ich habe das Gefühl, ich habe nicht ganz verstanden was du meinst. Vielleicht hast du ja nochmals Zeit mir ds zu zeigen bzw. zu erklären.

Huch es geht ja doch, ich hatte noch ein altes CSS im Browser :/ So gefällt es mir viel besser, das Text wechsel war irgendwie verwirrend.

Nachfrage: Bei deiner Version ist es eigentlich möglich diese Einstellungen irgendwie zu speichern, wenn ich die Seite wechsel, wieder komme dass die Einstellungen dann weiter vorhanden sind? In PHP würde ich das denke ich mal mit einer Session machen, aber bei jQuery?

[BaBa]

Nach einem Klick, sehe ich allerdings beide Klassen "btn-default btn-error"

Ja, weil zunächst beide nicht vorhanden sind. Wenn Du aber von Anfang an (wie bei meinem Beispiel ohne Fiddle) dem Button eine Klasse btn-default gäbest, würde die dann verschwinden.

So, wie es jetzt ist, kannst Du auch die btn-default Klasse(n) ganz weglassen. Wir haben jetzt ja ein filter-active drin, was man auch gleich verwenden kann.

Bei Deinem Beispiel gibt es noch Fehler im html. U.A. notiere einen Slash vor dem Schließen des img Tags! <img />. Auch finden sich noch Überreste von spans in den Buttons.

Nachfrage: Bei deiner Version ist es eigentlich möglich diese Einstellungen irgendwie zu speichern,

Ja. Mit Cookies (benötigt Cookie Plugin).

Cheers,
BaBa

[Jnnbo]

Hallo BaBa,

So, wie es jetzt ist, kannst Du auch die btn-default Klasse(n) ganz weglassen. Wir haben jetzt ja ein filter-active drin, was man auch gleich verwenden kann.

WOW, Wahnsinn was alles möglich ist. Vielen Dank nochmals für deine Hilfe.

Ja. Mit Cookies (benötigt Cookie Plugin).

Erst wollte ich schreiben, das klappt nicht, online ja aber offline bei mir nicht. Hab es dann auf mein Webspace geladen, die „jquery.cookie.min“ eingebunden und es läuft. Offline muss es auch nicht laufen, später sind eh PHP Scripte drin, dann muss ich es auf dem Webspace betreiben.

Auch hier nochmals vielen lieben Dank für das Beispiel. Ich setzte dieses jetzt mal in mein Live System ein und schau mir das Ergebnis an :)

[BaBa]

Freut mir.

Cheers,
BaBa

[Jnnbo]

Hallo BaBa,

vielleicht hast du ja für mein Problem nochmals eine Idee, wie ich das umsetzten könnte. In meinem Beispiel http://jsfiddle.net/hz89mdL9/9/ habe ich ein input Feld hinzugefügt.

Meine Idee ist, wenn ich anfange zu schreibe, dass sich dann unten die Liste aktualisiert, ist dieses überhaupt so ganz ohne PHP möglich und wenn ja schwer umzusetzen? Wüsste nicht einmal nach was ich bei Google suchen muss.

[Jnnbo]

Hallo BaBa,

vielleicht hast du ja für mein Problem nochmals eine Idee, wie ich das umsetzten könnte. In meinem Beispiel http://jsfiddle.net/hz89mdL9/9/ habe ich ein input Feld hinzugefügt.

Meine Idee ist, wenn ich anfange zu schreibe, dass sich dann unten die Liste aktualisiert, ist dieses überhaupt so ganz ohne PHP möglich und wenn ja schwer umzusetzen? Wüsste nicht einmal nach was ich bei Google suchen muss.

Ok, ich denke mit diesem jQuery Plugin, sollte ich weiter kommen: http://cheeaun.github.io/jquery.livefilter/

[BaBa]

Du hat wieder Fehler in Deinem html. Das wird Dir kenntlich gemacht durch die rote Farbe der schließenden </form> und </div> tags. Der Fehler ist der selbe wie voriges mal.

Meine Idee ist, wenn ich anfange zu schreibe, dass sich dann unten die Liste aktualisiert,

Was genau soll sich wie aktualisiseren. Was soll das Input Feld bewirken.

ist dieses überhaupt so ganz ohne PHP möglich und wenn ja schwer umzusetzen?

Es ist wahrscheinlich wieder mit Javascript einfach umzusetzen.

Cheers,
BaBa

[Jnnbo]

Hallo BaBa,

Du hat wieder Fehler in Deinem html. Das wird Dir kenntlich gemacht durch die rote Farbe der schließenden </form> und </div> tags. Der Fehler ist der selbe wie voriges mal.

Ich verwende den Editor "Sublime Text" darin habe ich mir HTML Stücke hinterlegt die ich mir durch einen Tastendruck aufrufen kann. Da ist der Fehler noch drin, werde ich gleich verbessern, war mir eigentlich sicher, das hätte ich vor ein paar Tange schon gemacht :/

Was genau soll sich wie aktualisiseren. Was soll das Input Feld bewirken.

Die Liste unterhalb des Felder sollte sich aktualisieren, je nachdem was ich oben eingebe. Suche ich Nach 3 sollte unten Benutzer 3 stehen. Suche ich nach frau sollte in der Liste nur Melissa Musterfrau stehen. Ich hoffe du verstehst was ich meine.

[BaBa]

Die Liste unterhalb des Felder sollte sich aktualisieren, je nachdem was ich oben eingebe. Suche ich Nach 3 sollte unten Benutzer 3 stehen.

Meine Frage zielte darauf ab, dass Du zum Ausdruck bringst, in welchen Spalten du Filtern möchtest. E.g. bei "3" könnten sonst auch Nutzer stehen, deren letzter Login um 13:55h stattgefunden hat ;)

Das Plugin sieht doch ganz schön aus. Ich hoffe man kann als zweites Argument auch noch eine Klasse mitgeben, e.g. "td.username".

Cheers,
BaBa