Question 399378 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – PHP HTML JS pagination

I have a page which feedbacks which looks like this (I just show 1 comment per page to see if the pagination works fine. Otherwise I’ll show more):
Pagination
The feedbacks come from a mysql database and are filtered as 1 feedback per page at the moment.
In my code, I put the logics so that when I click on the next page, it shows the comments correctly with the GET feature which is sent back from a PHP function in another file.
Here is a small code sample:
In my main file I call a function called paginate and I print it out

<?php  print paginate('', '?courseid='.$courseid.'&page=', $nbrPages, $current); ?>

In my main function in another file I have something like this which constructs the pagination with PHP variables, one by one.

function paginate($url, $link, $total, $current, $adj=5){ 
    $prev = $current - 1; 
    $next = $current + 1;
    $penultimate = $total - 1; 
    $pagination = '';
    if ($total > 1) {
    $pagination .= "<div class="row pagination_row">n";
    $pagination .= "<div class="col">n"; 
..

The problem I am facing is: When I click on "next" or any page I want to go, there is this this refresh feature which scrolls to the top and the user has to scroll back down to see the comment. So I put this code in javascript to rescroll back to the comment:

<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        
        var scrollpos = sessionStorage.getItem('scrollpos');
        if (scrollpos) {
            window.scrollTo(0, scrollpos);
            sessionStorage.removeItem('scrollpos');
        }
    });

    window.addEventListener("beforeunload", function (e) {
        sessionStorage.setItem('scrollpos', window.scrollY);
    });
</script>

If works fine but There’s a micro-freeze every time, which makes sense because the standard behavior is to scroll up after a refresh, and the script here scrolls down again. I’ve also seen this JQuery class preventDefault(); which prevents the page to scroll at all but in my case nothing refreshes. Does anyone have an idea how to refresh and not make the scroll up and scroll down action? So it seems more smooth? Thanks

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved it with Anchor tags (Thanks to morgan9999's suggestion): I make a div with any id:

    <div id="anchor">
..My code..
</div>

    in my php file I add the anchors like this:

    $pagination .= "<li><a class='paginate' href="{$url}{$link}{$i}#anchor">{$i}</a></li>";

    and it goes not completely up, until the div with the id, and it still makes some small artefacts but it's ok.


  2. 0

    Instead of printing your comments out via PHP, consider using the JS fetch API to fetch comment data on the fly from a PHP file hosted on your server. This will prevent your page refreshing as only a few elements will be updated rather than refreshing the whole DOM. Your PHP backend file should return JSON formatted data that JS can interpret and load.

    Security Side Note: Ensure to escape any malicious HTML code that may be in your comment data using the PHP function htmlspecialchars()

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search