jQuery Plugin Datatables mit bestimmter anzahl an einträgen anzeigen?

Hallo Forum, ich habe eine Tabelle, welche ich mit dem jQuery Plugin Datatables ( https://datatables.net/ ) erstellt habe. Diese wollte ich mit Buttons filtern können, dass z.B nur die ersten 9 Einträge der Tabelle angezeigt werden. Bei drücken auf einen anderen Knopf sollen dann z.B 12 Einträge angezeigt werden. Gibt es dafür javascript-Befehle, welche ich mit onClick() in den Button tun kann? Meine google-suchen waren bisher leider erfolglos.

Mit freundlichen Grüßen,

Quattrofun

5 Antworten

RakonDark

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Webseite

08.09.2017, 10:49

Ich würde das ganze via JavaScript bzw JQuery bauen und mir vom php nur ein JSON objekt geben lassen , hier hab ich mal den workflow ajax mit php gemacht und als beispiel dropsdowns organsisiert , praktisch kannst du dann nachladen und gleich die tabelle immer neu erzeugen lassen .
somit könnte man dann alles machen , also filtern suchen sortieren etc .

https://github.com/sheinatz/tools/tree/master/dropdown-cascade

Quattrofun

08.09.2017, 10:42

Danke für die Antworten, ich hab es bis jetzt so gemacht, dass die PHP-Datei, welche die Einträge aus der Datenbank nimmt die HTML-Tabelle erstellt und das jeweilige <tr> mit einer klasse mit zahl versieht (.table_id_1 als Beispiel).

Mit jQuery kann ich dann mit einer Funktion mit while schleife erst alle reihen unsichtbar machen und darauf nur die ersten 5 sichtbar ( while (var <= 5) )

Daran arbeite ich gerade noch, wenn ich fragen hab frag ich :D

surbahar53

08.09.2017, 08:59

Falls sich um eine HTML-Tabelle handelt, könnte man probieren, einzelne Zeilen mit dem style-Attribut unsichtbar / sichtbar zu machen. In der Routine onClick() müsste der entsprechende HTML-Code geändert werden.

Funktioniert das nicht, könnte man in der Routine onClick() weitere Tabellen-Zeilen in das HTML-Dokument zwischen <table> ... </table> einfügen bzw. wieder löschen.

MonkeyKing

08.09.2017, 10:06

HTML würde ich nicht verändern, das kann einfach über CSS Manipulation gelöst werden.

surbahar53

08.09.2017, 10:08

@MonkeyKing

Richtig, aber wenn es sich um mehr als zwei Varianten (8 / 12 Zeilen) handelt, wird es mit CSS schnell unübersichtlich. Dann ist es einfacher, in das Dokument HTML-Code einzufügen.

Quattrofun

Fragesteller

08.09.2017, 10:50

geht leider nicht, da die Tabelle mit PHP erstellt wird. Es muss schon mit display: show etc.. gemacht werden, aber ich denke ich hab die Lösung jzt

JayC71

08.09.2017, 10:06

Einfacher wäre es ein Zahleneingabefeld oder eine Dropdownliste zu machen wo dann die Anzahl der Zeilen angegeben werden können.

Wenn du die Anzahl hast gehst du mit einer foreach schleife durch jede Zeile und zählst immer einen Wert hoch, ist der Wert höher als eingegeben so kannst du per css die Zeile auf display: none setzen.

Woher ich das weiß:Berufserfahrung – Software-Entwickler

Quattrofun

Fragesteller

08.09.2017, 10:43

geht nicht, da es 3 feste Zahlen sein müssen, man soll diese später nicht mehr auf der Website verändern können

MonkeyKing

08.09.2017, 10:05

Ich kenne jetzt nicht das HTML Markup, aber vom Prinzip her: angenommen es gibt ein Parent DIV dass die Klasse "parent" hat und die divs darunter enthalten die entsprechenden Einträge. Dann kannst du z.B. in den onclick Handler so etwas schreiben:

onclick="$('.parent div').show();$('.parent div:nth-child(n+10)').hide();"

Also zeigst du erst alle Enträge und versteckst dann alle Einträge ab dem 10. Siehe auch:

https://css-tricks.com/useful-nth-child-recipies/

Servuz,

ich würde gerne in allen Spalten einer Tabelle gleichzeitig suchen können. Beispiel:

name genre subgenre rating

wenn ich ein genre UND dahinter ein subgenre in die suchleiste eingebe (genre subgenre), soll er mir alle einträge anzeigen, die sowohl dieses genre als auch dieses subgenre aufweisen.

leider konnte ich hierzu absolut nichts finden.

...zur Frage

Javascript (jQuery) / HTML Button mehrmals verwenden?

Hey, ich habe euch hier gleich mal ein JsFiddle verlinkt damit ihr mein Problem besser verstehen könnt: https://jsfiddle.net/Johnny3_3/dqqrvm6q/

Wenn ihr auf den Start Button klickt, dann wird durch Javascript (jQuery) der Kreis sichtbar gemacht. Allerdings kann ich durch das erneute klicken auf den Button den Kreis nicht verschwinden und danach nochmal sichtbar machen lassen. Sprich ich will unendlich oft auf den Button klicken können und somit den Kreis sichtbar und unsichtbar machen.

...zur Frage

Wenn man auf einer Website einen Button integrieren möchte, der die Farbe ändert wenn man mit dem Mauszeiger drüber geht, nutzt man da eher Javascript oder?

jQuery Code dafür? Und der Button soll natürlich wenn man mit der Maus wieder vom Button runtergeht die Ursprungsfarbe annehmen?

...zur Frage

Wie kann ich einer Javascript Funktion Argumente per Onclick übergeben?

ich möchte flexibler programmieren und habe daher das Onclick-Event nicht im Button zu stehen. Ich rufe dieses Event über eine Id auf.

var element.document.getElementById("element");

Nun habe ich eine Funktion geschrieben, die für einen Parameter ein Argument erwartet, diesen möchte ich per Onclick-Event übergeben.

Wenn ich das Event wie folgend aufrufe, wird die Funktion gleich ausgeführt, ohne das ich den Button klicken muss.

anderesElement.onclick = nameDerFunktion("String-Argument");

Wie kann ich der Funktion nun ein Argument per Buttonklick übergeben?

...zur Frage

CSS-onclick?

Hallo, ist es möglich, dass ich die Farbe von einem Button ändern kann, wenn ich draufklicke? Gibt es da so etwas wie "onclick", wie bei JavaScript?

...zur Frage

Mehrere Parameter durch einen Button ausgeben in Javascript?

Ich lerne gerade Javascript mit einer Tutorial Reihe und der Mann im Tutorial hat mehrere Parameter benutzt um einen Liebes Test zu Programmieren. Ich wollte dann das man erst einen Knopf drücken muss um das Ergebnis angezeigt zu bekommen. Aber es funktioniert nicht denn wenn ich auf den Button drücke, passiert nichts. woran liegt das ? Das ist mein Code: (Die formatierung ist eigentlich anders)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function LiebesTest(name1, name2){

document.write(name1 + " und " + name2 + " haben " + punkte + " Punkte ");

var punke;

punkte= (name1+name2).length;

}

LiebesTest("Filme", "serien");

</script>

<form>

<input onclick="text" type="button" value="Test!"

</form>

</body>

</html>

...zur Frage

wie kann ich in javascript eine funktion ohne button auslösen?

Hallo,

ich bin noch Anfänger in javascript und wollte fragen wie ich eine Funktion in javascript auslöse nachdem meine HTML Seite geladen hat, ohne explizit einen button mit einer onclick zu schreiben der diese Funktion aufruft. Die Funktion kriegt ein Parameter im HTML Teil übergeben, was dann in etwa so aussieht:

<button id="drücken" onclick="Funktion({{result}})"></button>

ich kriege das nur durch diesen button im html teil hin.

<tbody id="Eintrag"></tbody>

der Parameter wird iteriert und in eine Tabelle gehängt

Javascript:

function Funktion(result){

for(var key in result)

key an Eintrag anhängen.

}

Das funktioniert auch alles gut, nur wird das alles nur ausgeführt wenn ich explizit auf den button drücke. verstehe auch nicht wie das sonst gehen würde. Ich kann ja nicht beispielsweise ein window.onload auf der javascript-Datei schreiben weil ich ja noch den result parameter in der HTML Datei übergeben muss.

Gibt es eventuell eine Möglichkeit innerhalb des HTML Datei dann sowas zu schreiben?:

window.onload = Funktion({{result}});

Bei mir kennt er dann nicht Funktion weil es auf der externen Javascript-Datei liegt.

...zur Frage

PHP Variable mit Button über javascript an Popup übergeben?

Hallo,
ich habe eine mit PHP dynamisch erstellte Tabelle zum anzeigen von Anträgen. In jeder Zeile meiner Tabelle gibt es einen Button zum öffnen eines Popups. An dieses Popup soll die ID des jeweiligen Antrags übergeben werden um alle Daten auszulesen.

Wie kann ich es schaffen, dass in einer dynamischen Tabelle (alle Button Namen gleich) jeder Button unterschieden wird, oder erkannt wird welchen Button ich gedrückt habe? Und wie kann ich die Variable aus PHP über javascript an das Popup übergeben?

Ich würde mich über jede Hilfe freuen, versuche es nun schon seit Tagen, komme aber zu keinem Ergebnis

...zur Frage

HTML Check Textfeld Input Onclick?

Kann man irgendwie definieren, dass die Onclick aktion nur ausgeführt wird, wenn in 2 bestimmten textfeldern bestimmter text steht? Also, dass z.B. In Feld 1 "Test" steht und in Feld 2 "Tee" steht, dass man nur dann die Button onclick action ausführen kann und sonst nichts passiert? Möchte, dass wenn in beiden Textfeldern eine bestimmte sache steht, erst dann auf einen Button geclickt werden kann, welcher einen dann weiterleitet.

...zur Frage

Wie sende ich Variablen von JavaScript nach Flask via jQuery?

Hallo,

ich bin in JavaScript/jQuery und auch Python/Flask noch ein ziemlicher Anfänger. Ich versuche gerade, einfach nur ein JSON-Objekt aus JavaScript in einem HTML-Template mit Flask anzuzeigen.

Hier mein Code:

Flask:

from flask import Flask,request, render_template

app = Flask(__name__)

@app.route("/")
def rofl():
  return render_template("test.html")

@app.route("/test", methods=['POST'])
def test():
  Namensliste = request.get_json(True)
  print(Namensliste)
  return render_template("rofl.html", Namensliste=Namensliste)

if __name__ == '__main__':
  app.run(port=5200)

test.html:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="#" method="post">
    <button type="button" onclick="JSONTest()"> Send UserInfo</button>
  </form>
</body>

rofl.html:

<head>
  <meta charset="UTF-8">
  <title>Titel</title>
</head>
<body>
  NamensListe: {{Namensliste}}
</body>

JavaScript-Datei:

var myJason = {
  "name1" : "Jens",
  "name2" : "Josef",
  "name3" : "Johannes"
}

function JSONTest() {
  var MyJason= JSON.stringify(myJason);
  console.log(MyJason)
  $.ajax({
    type: 'POST',
    url: '/test',
    data: MyJason,
    success: function(data) {
      console.log(data, "Rückmeldung1");
  }});
}

Wie mein Code eigentlich funktionieren soll ist: Ich rufe die Route "/" auf, drücke auf den Button: "JSONTest()" und meine Funktion sendet via jQuery mein JSON-Objekt an "/test". Dort wird das Objekt in Namensliste gespeichert und rofl.html mit der Namensliste darin aufgerufen.

Ich weiß, dass hier wahrscheinlich viele Grundlagenfehler drin sind, aber ich habe wirklich ewig lang gegooglet und finde einfach nicht, wie man es richtig macht.

Danke schon einmal für jede Idee.

...zur Frage

Wie kann ich eine bestehende html Tabelle gezielt auslesen?

Hallo, folgender Sachverhalt:

Auf einer Internetseite (A) ist eine html Tabelle, welche sich täglich ändert.

Ich möchte auf meiner Internetseite (B) eine gezielte Abfrage auf diese Tabelle erstellen.

Ein Beispiel:
Auf der Ausgangsseite (A) ist eine html Tabelle mit Name, Alter, Wohnort und Postleitzahl. Auf meiner Seite (B) soll ein Eingabefeld sein, indem der Nutzer gezielt einen Nahmen eingeben kann und dann Alter, Wohnort und Postleitzahl aller Einträge mit diesem namen angezeigt bekommt.

Im Optimalfall wird die Eingabe gespeichert und der Nutzer wird nur benachrichtigt, wenn sich Einträge für seinen Namen geändert haben.

Mit welchem Ansatz würdet ihr dieses Problem lösen?

html, Javascript, SQL, php, welche Systeme werden benötigt?

...zur Frage

Javascript Ausgabe erweitern?

Hallo,

wie kann man die Ausgabe in einem textarea feld erweitern? Ich habe unter dem Textfeld verschiedene Buttons mit verschiedenen values. Wenn ich einen Button drücke, dann soll er im Textarea-feld angezeigt werden. Wie mache ich aber nun, dass nicht nur ein value angezeigt wird, sondern so viel, wie buttons gedrückt werden. Das ist mein bisheriger Code:

Html

<textarea name="displa" id="display" cols="40" rows="7"></textarea>
    <button value="1">1</button>
    <button value="2">2</button>
    <button value="3">3</button>
    <button value="4">4</button>
    <button value="5">5</button>
    <button value="6">6</button>
    <button value="7">7</button>
    <button value="8">8</button>
    <button value="9">9</button>
    <button value="+">+</button>
    <button value="-">-</button>
    <button value="*">*</button>
    <button value="/">/</button>

Javascript

$("button").click(function() {
    var fired_button = $(this).val();
    $('#display').value = fired_button;
    break;
    return;
});

...zur Frage

Seite wird bei Weiterleitung nicht richtig angezeigt?

Hey,

Ich programmiere gerade etwas in PHP, CSS, HTML, JS... Ich habe ein Button gemacht und wenn mann auf ihn clickt soll mann weitergeleitet werden (JavaScript Funktion).

Die Weiterleitung funktioniert aber wenn mann auf der Seite ist wird nur der PHP Quell text angezeigt...

Ich bitte um hilfe!

Code:

JavaScript Weiterleitung:

<script type="text/javascript">
window.location = "login.php";
</script>

Button:

<form action="weiterleitung-login.html" method="post" class="buttons"><input type="submit" value="Einloggen" class="login"></form>

MfG Dominik

...zur Frage

Programmieren javascript alert function?

hallo!
button erstellen:

bsp: onclick="alert ('hallo')"

frage: was ist der Unterschied zwischen alert und function? Function muss ich zwar noch definieren aber Ich kann doch mit beiden festlegen, was durch den Klick passieren soll oder?

danke im Voraus

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen