1

I would like to create a web page that is a giant table (a ranking table) with millions of rows. The table attributes should be the row number, a little image, a username and another number (indicating a score). When loading the page it should instantly center and starting to load the table from the row associated to the currently logged in user.

So here are my two questions:

  1. What is the best way to center the starting viewport on the current logged in user row?
  2. If an user is in a very low position he would have to wait until all the upper rows are ready, so what should i do to optimize the loading times? Maybe there is a way to load only the rows that are near the viewport of the user?

Here's an example of what I was trying to do (using Bootstrap for the table classes). I was simply putting the id="scrollpoint" on the current username row, so it is centered when i go to table.php#scrollpoint, this surely is not a nice solution, and I don't know at all how to solve the slow loading problems:

<table class="table">
        <thead>
            <tr>
                <th class="sticky-top bg-success" scope="col">#</th>
                <th class="sticky-top bg-success" scope="col">IMG</th>
                <th class="sticky-top bg-success" scope="col">USERNAME</th>
                <th class="sticky-top bg-success" scope="col">POINTS</th>
            </tr>
        </thead>
        <tbody>
            <?php
            $i = 1;
            while ($i <= $num_rows) {
                if ($_SESSION['username'] == $row['username']) {
            ?>
                    <tr class="table-light" id="scrollpoint">
                        <th scope="row"><?php echo $i; ?></th>
                        <td><img src="img.png"></td>
                        <td><?php echo $row['username'] ?></td>
                        <td><?php echo $row['points'] ?></td>
                    </tr>
                <?php } else { ?>
                    <tr>
                        <th scope="row"><?php echo $i; ?></th>
                        <td><img src="img.png"></td>
                        <td><?php echo $row['username'] ?></td>
                        <td><?php echo $row['points'] ?></td>
                    </tr>
            <?php
                }
                $i++;
            }
            ?>
        </tbody>
    </table>

Thanks for the help, and sorry if not very clear, english is not my primary language.

tip pit
  • 21
  • 4
  • You already said what is likely your best option. Load just the rows around the user you want to view, either by pagination or by dynamically loading/unloading the rows of the table as you scroll. – Liftoff Apr 26 '21 at 16:20
  • [Scroll to a specific position on a page using Javascript / Jquery](https://stackoverflow.com/questions/6355482/scroll-to-a-specific-position-on-a-page-using-javascript-jquery) (with [Retrieve the position (X,Y) of an HTML element relative to the browser window](https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element-relative-to-the-browser-window)), and as david already suggested: use some sort of pagination to optimize it. – Definitely not Rafal Apr 26 '21 at 16:55

0 Answers0