Ankündigung

Einklappen
Keine Ankündigung bisher.

DataTable in Bootstrap 4

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • DataTable in Bootstrap 4

    Hallo,

    ich möchte gerne eine DataTable nach Bootstrap 4 (https://datatables.net/examples/styling/bootstrap4.html) darstellen... leider funktioniert es nicht, optisch nicht Bootstrap 4...
    vielleicht kannst du mir sagen was ich falsch mache?

    PHP-Code:

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <
    link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <
    link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

    <
    div class="container">
        <
    table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
          <
    thead>
            <
    tr>
              <
    th class="th-sm">#</th>
              
    <th class="th-sm">Spalte 1</th>
              <
    th class="th-sm">Spalte 2</th>
              <
    th class="th-sm">Spalte 3</th>
              <
    th class="th-sm">Spalte 4</th>
              <
    th class="th-sm">Spalte 5</th>
              <
    th class="th-sm">Spalte 6</th>
              <
    th class="th-sm">Spalte 7</th>
            </
    tr>
          </
    thead>
          <
    tbody>
            <
    tr>
              <
    td>1</td>
              <
    td>Zeile 1</td>
              <
    td>Zeile 1</td>
              <
    td>Zeile 1</td>
              <
    td>Zeile 1</td>
              <
    td>Zeile 1</td>
              <
    td>Zeile 1</td>
              <
    td>Zeile 1</td>
            </
    tr>
            <
    tr>
              <
    td>Zeile 2</td>
              <
    td>Zeile 2</td>
              <
    td>Zeile 2</td>
              <
    td>Zeile 2</td>
              <
    td>Zeile 2</td>
              <
    td>Zeile 2</td>
              <
    td>Zeile 2</td>
              <
    td>Zeile 2</td>
            </
    tr>
          </
    tbody>
          <
    tfoot>
            <
    tr>
              <
    th>#</th>
              
    <th>Spalte 1</th>
              <
    th>Spalte 2</th>
              <
    th>Spalte 3</th>
              <
    th>Spalte 4</th>
              <
    th>Spalte 5</th>
              <
    th>Spalte 6</th>
              <
    th>Spalte 7</th>
            </
    tr>
          </
    tfoot>
        </
    table>
    </
    div>

    <
    script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

    <script>

        $(document).ready( function () {
            $('#dtBasicExample').DataTable();
        } );

    </script> 


  • #2
    Hat nichts mit PHP zu tun.

    https://wiki.selfhtml.org/wiki/Tfoot
    th ist eine Zelle im Kopfbereich einer Tabelle nicht im Fussbereich. Validiere deine Seite, dann werden dir diese Fehler angezeigt.

    Kommentar


    • #3
      Abschreiben sollte man schon können.

      In addition to the above code, the following Javascript library files are loaded for use in this example:
      Eines der 3 fehlt ...

      cellspacing und width sind auch nicht mehr aktuell.

      Kommentar

      Lädt...
      X