Bootstrap Tabelle sortieren

  • Hi.


    Ich habe eine Tabelle "class table" und möchte mit Klick auf den Spaltenkopf die Tabelle nach dieser Spalte sortieren. Ich vermute ich benötige CSS und JavaScript...



    wer kann mir helfen?


    Gruß

  • Danke für den Tipp es hat mal ganz kurz geklappt. Ich habe die beiden Dateien hinzugefügt. Dann habe ich im <head> diesen Code eingefügt:

    Code
    <script>
      $(document).ready( function () {
        $('#tabelle11').DataTable();
      });
      </script>

    meine Tabelle wurde angepasst. Dann habe ich diesen Code wieder entfernt und die Tabelle wurde wieder im ursprünglichen Zustand angezeigt. Wenn ich den <script> Block jetzt wieder hinzufüge wird die Tabelle nicht mehr angepasst, trotz x-maligem aktualisieren des Browsers.


    Was ist das Problem?

  • lösch mal die Cache die Browsers. Wenn es ja ging und du in der Zeit nix anderes gemacht hast auser das was du sagtest dann könnte es daran liegen

    Ansonsten mußt du mal den Link zur Seite posten

  • ok bin wieder da ...


    kann das Problem hier liegen? Ausschnitt aus meiner header.php:


    Ausschnitt aus meine footer.php:

    Code
    <!-- Optional JavaScript -->
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="../js/custom.js"></script>
    </body>
    </html>

    ich fange erst mit Webentwicklung an ...


    stimmt hier irgendeine Reihenfolge nicht ??

  • Zitat

    stimmt hier irgendeine Reihenfolge nicht ??

    Das glaube ich auch: Die Skripts für die Bibliotheken bindest Du erst im Footer ein, aber die Tabelle schon im Header. Eigentlich wäre das OK, weil Du ja document-ready verwendest, aber auch jQuery wird erst im Footer eingebunden und steht im Header noch nicht zur Verfügung. Verschiebe den Code hinter Einbinden der Bibliotheken, dann sollte es funktinieren:

  • jetzt sieht es gut aus :) Danke


    habe den js code jetzt noch in die

    Code
    <script src="../js/custom.js"></script>

    verschoben


    Du benötigst schon CSS und Javascript, aber Du brauchst es nicht selber zu entwickeln, denn das gibt es schon:

    https://datatables.net

    Nicht benötigte Features können weg konfiguriert werden. Wenn ich mich richtig erinnere, ist Booststrap-Layout möglich.

    wo kann ich das konfigurieren ??

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!