mehrere Kategorien in einer Tabelle - json

klausi89

Erfahrenes Mitglied
Hallo ich habe mal wieder ne frage

ich lese aus einer Json datei den inhalt der Kategorie "Spiele" aus, und das wird auch wie gewünscht in der Datatable ausgegeben.

PHP:
  $Data = file_get_contents("json.php");
    $Object = json_decode($Data);
    $myObject = $Object->list_data->normal->Spiele;

abgerufen wird das ganze dann so....

Code:
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
    <title>Liste</title>

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arimo+Web">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>

<ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="flex-sm-fill nav-link text-dark" href="#"><i class="fa fa-caret-square-o-right"></i> Spiele</a>
    </li>
    <li class="nav-item">
      <a class="flex-sm-fill nav-link text-dark" href="#"><i class="fa fa-caret-square-o-right"></i> Musik</a>
    </li>
    <li class="nav-item">
      <a class="flex-sm-fill nav-link text-dark" href="#"><i class="fa fa-caret-square-o-right"></i> Kunst</a>
    </li>
    <li class="nav-item">
      <a class="flex-sm-fill nav-link text-dark" href="#"><i class="fa fa-caret-square-o-right"></i> Sport</a>
    </li>
  </ul>

  <table id="example" class="table table-striped table-bordered text-center">
    <thead>
      <tr>

      <th scope="col">Name</th>
      <th scope="col">User</th>
      <th scope="col">Url</th>
      </tr>
    </thead>
    <tbody>
      <?php foreach($myObject as $key => $item): ?>
        <tr>

          <td><?PHP echo $item->name; ?></td>
          <td><?PHP echo $item->active_users; ?></td>
          <td><?PHP echo $item->url; ?></td>
        </tr>
      <?php endforeach; ?>
    </tbody>
  </table>
 
 
   <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<script type="text/javascript">


    $('#example').DataTable(     {
      "order": [[ 2, "desc" ]],
      "pageLength": 15,

    })

</script>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

</body>
</html>

nun hab ich aber noch 3 weitere Kategorien

PHP:
    $myObject = $Object->list_data->normal->Musik;
    $myObject = $Object->list_data->normal->Kunst;
    $myObject = $Object->list_data->normal->Sport;

Kann man überhaupt verschiedene Kategorien in einer Tabelle anzeigen - gesteuert über das nav menue , wenn ja wie steuert man die verschiedenen Kategorien an?

Da stehe ich gerade echt aufn schlauch wie ich das ganze einbinden kann, bin aber schon froh das ich bis hierhin das schon mal alleine geschafft habe.

Vielleicht hat jemand ne idee dazu.

Danke im voraus
 
Möglich ist das auf jeden Fall.

Entweder mit Neuladen der Seite, wenn eine Kategorie ausgewählt wurde: Statt der a-Tags Radiobuttons in einem Formular verwenden mit der Kategorie als value. Wenn Du dann das Formular abschickst, steht die Kategorie als GET- oder POST-Parameter zur Verfügung und Du kannst die richtigen Daten auslesen und die Tabelle anlegen.

Oder ohne Neuladen der Seite indem Du die Tabelle mit Ajax holst. Dabei die Kategorie als Parameter an den Server schicken, so dass Du dort ebenfalls die richtigen Daten auslesen kannst.

Wobei ich letzteres bevorzugen würde.
 
Was heißt das? Unverständlich beschrieben?
Mir fällt noch eine dritte Möglichkeit ein, die gangbar ist, wenn die Tabellen nicht allzu groß sind; die Anzahl der Kategorien hält sich ja in Grenzen: Das ganze JSON an Javascript übergeben und dann die Tabelle entsprechend der gewählten Kategorie aufbauen. Hätte den Vorteil, dass das Umschalten der Kategorien keine Anfrage an den Server mehr braucht und blitzschnell gehen würde.
 
Zurück