0

estoy intentando crear una paginación con unos datos que tengo en un archivo externo .json, y no me sale. Tengo un archivo JSON

{
    "posts": [
        {
            "postId": 0,
            "postCategory": "psx",
            "postTitle": "Crash Bandicoot 3: Warped",
            "postDatetime": "29 de febrero de 2018",
            "postImage": "http://juegosdigitalespty.com/wp-content/uploads/2016/08/Crash-Bandicoot-3-Warped-GC02.jpg",
            "postContent": {
                "postDescription": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum obcaecati quasi autem dignissimos. Quas est placeat omnis nulla vitae, veniam ex cumque tempore, molestias quaerat quibusdam labore minima illum maxime!",
                "postCaptures": {
                    "capture1": "https://picsum.photos/500/500",
                    "capture2": "https://picsum.photos/500/500",
                    "capture3": "https://picsum.photos/500/500",
                    "capture4": "https://picsum.photos/500/500",
                    "capture5": "https://picsum.photos/500/500",
                    "capture6": "https://picsum.photos/500/500",
                    "capture7": "https://picsum.photos/500/500",
                    "capture8": "https://picsum.photos/500/500"
                },
                "postDownloadServers": {
                    "mega": "unenlacedemega",
                    "mediafire": "unenlacedemediafire",
                    "4shared": "unenlacede4shared"
                }
            },
            "postAutor": {
                "postAutorName": "Kaoru",
                "postAutorImage": "https://cdn.vox-cdn.com/uploads/chorus_image/image/61082677/Banner_TheMessenger_Switch.0.jpg"
            }
        },
        {
            "postId": 0,
            "postCategory": "sega-genesis",
            "postTitle": "Mortal Kombat 3: Ultimate",
            "postDatetime": "29 de febrero de 2018",
            "postImage": "https://images.gamewatcherstatic.com/image/file/4/0f/29624/0018162.jpg",
            "postContent": {
                "postDescription": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum obcaecati quasi autem dignissimos. Quas est placeat omnis nulla vitae, veniam ex cumque tempore, molestias quaerat quibusdam labore minima illum maxime!",
                "postCaptures": {
                    "capture1": "https://vignette.wikia.nocookie.net/inmortalkombat/images/2/22/Umk3.png/revision/latest?cb=20130901214446&path-prefix=es",
                    "capture2": "http://www.letsplaysega.com/wp-content/uploads/images/gen/Ultimate_Mortal_Kombat_3.png",
                    "capture3": "https://i.kinja-img.com/gawker-media/image/upload/s--jdGuuAWC--/c_fit,f_auto,fl_progressive,q_80,w_320/18j58jyffcu00jpg.jpg",
                    "capture4": "https://www.mobygames.com/images/shots/l/92809-ultimate-mortal-kombat-3-genesis-screenshot-won-with-a-brutality.gif",
                    "capture5": "https://i.ytimg.com/vi/828KnN83N-I/maxresdefault.jpg",
                    "capture6": "https://i.ytimg.com/vi/ikWeup2QW6I/maxresdefault.jpg",
                    "capture7": "https://picsum.photos/500/500",
                    "capture8": "https://picsum.photos/500/500"
                },
                "postDownloadServers": {
                    "mega": "unenlacedemega",
                    "mediafire": "unenlacedemediafire",
                    "4shared": "unenlacede4shared"
                }
            },
            "postAutor": {
                "postAutorName": "Kaoru",
                "postAutorImage": "https://cdn.vox-cdn.com/uploads/chorus_image/image/61082677/Banner_TheMessenger_Switch.0.jpg"
            }
        },
        {
            "postId": 0,
            "postCategory": "mame",
            "postTitle": "Metal Slug 2: Super Vehicle",
            "postDatetime": "29 de febrero de 2018",
            "postImage": "https://i.ytimg.com/vi/wj1815s8YAU/maxresdefault.jpg",
            "postContent": {
                "postDescription": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum obcaecati quasi autem dignissimos. Quas est placeat omnis nulla vitae, veniam ex cumque tempore, molestias quaerat quibusdam labore minima illum maxime!",
                "postCaptures": {
                    "capture1": "https://picsum.photos/500/500",
                    "capture2": "https://picsum.photos/500/500",
                    "capture3": "https://picsum.photos/500/500",
                    "capture4": "https://picsum.photos/500/500",
                    "capture5": "https://picsum.photos/500/500",
                    "capture6": "https://picsum.photos/500/500",
                    "capture7": "https://picsum.photos/500/500",
                    "capture8": "https://picsum.photos/500/500"
                },
                "postDownloadServers": {
                    "mega": "unenlacedemega",
                    "mediafire": "unenlacedemediafire",
                    "4shared": "unenlacede4shared"
                }
            },
            "postAutor": {
                "postAutorName": "Kaoru",
                "postAutorImage": "https://cdn.vox-cdn.com/uploads/chorus_image/image/61082677/Banner_TheMessenger_Switch.0.jpg"
            }
        }
    ]
}

Y en mi archivo PHP tengo lo siguiente:

<div class="main-content-column">
    <h2 class="main-title">Juegos</h2>
    <?php
        $gamesFile = file_get_contents("admin/jsonFiles/posts.json");
        $gamesFileJson = json_decode($gamesFile);

        if (count($gamesFileJson->posts) > 0) {
            for($i = 0; $i < count($gamesFileJson->posts); $i++){
                if(isset($gamesFileJson->posts[$i])){
                    $postImage = $gamesFileJson->posts[$i]->postImage;
                    $postTitle = $gamesFileJson->posts[$i]->postTitle;
                    $postAutor = $gamesFileJson->posts[$i]->postAutor->postAutorName;
                    $postAutorImage = $gamesFileJson->posts[$i]->postAutor->postAutorImage;
                    $postCategoryUrl = $gamesFileJson->posts[$i]->postCategory;
                    $postCategoryName = getOnlyCategory($gamesFileJson->posts[$i]->postCategory);

                    echo '
                        <div class="main-card">
                                <div class="main-card-image">
                                    <img src="'.$postImage.'" alt="">
                                </div>

                                <div class="main-card-information">
                                    <h2 class="main-card-information-title">
                                        <div class="main-card-cat">
                                            <a href="'.urls['url'].'/categoria/'.$postCategoryUrl.'">
                                                '.$postCategoryName.'
                                            </a>
                                        </div>

                                        <a href="'.urls['url'].'/game/'.$postCategoryUrl.'/'.eliminar_tildes($postTitle).'">'.$postTitle.'</a>

                                        <p class="main-card-information__autor">
                                            <img src="'.$postAutorImage.'" alt="">
                                            '.$postAutor.'
                                        </p>
                                    </h2>
                                </div>
                            </div>
                    ';
                }
            }
        }
    ?>
</div>

Intenté muchísimas cosas, he utilizado códigos que vi por la comunidad, y nada. Necesito que se muestren 12 "elementos" por página. Les agradecería que me ayudarán con esto. Un abrazo.

1 respuesta 1

0

Una de las opciones que puedes usar es: DataTables el cual es un control completo (incluye paginación, ordenamiento, búsqueda, etcétera).

El siguiente ejemplo es una pequeña muestra que puedes modificar según tu fuente de datos JSON:

NOTA: jsfiddle modificado según esta respuesta en inglés.

var data = [
  ["1", "John", "https://picsum.photos/500/500"],
  ["2", "Jim", "https://picsum.photos/500/500"]
];

var table = $('#example').DataTable({
  data: data,
  lengthMenu: [12, 25, 50, "All"],
  columnDefs: [{
    targets: 2,
    render: function(data) {
      return '<img src="' + data + '" style="width: 30px; height: 30px;">'
    }
  }]
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>
<link href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css" rel="stylesheet" />
<link href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet" />
<table id="example">
  <thead>
    <tr>
      <th>id</th>
      <th>Name</th>
      <th>image</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.