Slow page to load

Asked

Viewed 46 times

-2

I have a table that will list data, but it is A lot of data, which is taking a long time to load the page.

How do I avoid this problem?

Example: That table items will appear according to the scroll bar.

Researching I found this: https://datatables.net/examples/data_sources/server_side , but I didn’t understand how to apply, can anyone help me? here’s the code:

                       $sql = "SELECT * FROM item_db ORDER BY id ASC";
                        $sql = $pdo->query($sql);

                        include "functions/tipo_itens.php";
                        include "functions/equipa_em.php";

                         foreach ($sql->fetchAll() as $row) {

                            $id = $row['id'];

                            $tipo = $row['type'];

                            $equipa = $row['equip_locations'];



                            ?>

                            <tr>
                                <td><?php echo "<img src='./images/db_itens/icons/$id.png'> ".$row['id'].""; ?></td>
                                <td><?php echo $row['name_japanese']; ?></td>
                                <td><?php echo $tipo_itens[$tipo]; ?></td>
                                <td>
                                    <button type="button" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#mediumModal<?php echo $row['id']; ?>">Visualizar</button>
                                </td>
                            </tr>
                            <!-- Inicio Modal -->
                            <div class="modal fade" id="mediumModal<?php echo $row['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel">
                                <div class="modal-dialog modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="mediumModalLabel"><?php echo "<img src='./images/db_itens/images/$id.png'> #".$row['id']." - ".$row['name_japanese'].""; ?></h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            

                                            <p> <b>Nome:</b> <?php echo $row['name_japanese']; ?></p>
                                            <p> <b>Tipo:</b> <?php echo $tipo_itens[$tipo]; ?></p>
                                            <p> <b>Valor de Compra:</b> <?php echo $row['price_buy']; ?></p>
                                            <p> <b>Valor de Venda:</b> <?php echo $row['price_sell']; ?></p>
                                            <p> <b>Peso:</b> <?php echo $row['weight']; ?></p>
                                            <p> <b>Defesa:</b> <?php echo $row['defence']; ?></p>
                                            <p> <b>ATK/MATK:</b> <?php echo "".$row['atk']."/".$row['atk'].""; ?></p>
                                            <p> <b>Nível da Arma:</b> <?php echo $row['weapon_level']; ?></p>
                                            <p> <b>Distância:</b> <?php echo $row['range']; ?></p>
                                            <p> <b>Slots:</b> <?php echo $row['slots']; ?></p>
                                            <p> <b>Nível Mínimo para Equipar:</b> <?php echo $row['equip_level_min']; ?></p>
                                            <p> <b>Equipa em:</b> <?php echo $equipa_em[$equipa]; ?></p>
                                            <p> <b>Script ao usar:</b> <?php echo $row['script']; ?></p>
                                            <p> <b>Script ao equipar:</b> <?php echo $row['equip_script']; ?></p>
                                            <p> <b>Script ao desequipar:</b> <?php echo $row['unequip_script']; ?></p>

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Fim Modal -->
                        <?php } ?>
php

  • i do this by loading only the visible data from the page and using the append with ajax to load more data as the user scrolls down the scroll bar

1 answer

-2

You need to limit the number of rows in your table.

There are several ways to solve.

  • Adding some filter to not list as much data;
  • Limit the number of lines
  • Make asynchronous calls with Javascript to fill the table gradually as the user navigates

  • So how do I make this kind of filter? The table already loads 20 items per page, but the page only loads when it lists items from all pages.

  • @Rafaelrenan You do not need to query all items at once, you should consult on demand, using in your query a Skip/Take, not to bring the entire data mass to memory. You can also see the creation of a index for your query, this will make it faster.

Browser other questions tagged php

You are not signed in. Login or sign up in order to post.