"Load more" button: how to make a lazy load and render data from MySQL

  • Hello, Pagekitters!

    I'm sure everybody likes "Load more" button with lazy loading and rendering small portions of the data from MySQL on request.

    Here I will show you how I managed to create this button in my Pagekit extension.

    I think this post will be interesting for beginners (like me), but I hope even an experienced amature will find something useful. Let's go!

    What do I have:

    • A MySQL table containing many items separated in several columns

    What do I want:

    1. To render a 4x2 grid of the most recently added items (8 items in total)
    2. To render a "Load more" button which send next 8 items to my grid when clicked
    3. To destroy the button when there's nothing left to load
    4. Not to show the button if initial total number of items is 8 or less

    1 step: SiteController and views/index.php

    Great! Now first 8 items are loaded and rendered! Let's create a "loadmore" method for our button!

    First I will define a function, that sends a POST request to our controller, then I will deal with the response.

    2nd step - Vuejs methods, POST request and SiteController response:

    Works! Now a final note. If our initial number of items is 8 or less (nothing more to load) we don't want a button to be rendered at all. Let's add one more function to our items.js. We will use "created" option for that.

    JavaScript: items.js
    1. created: function () {
    2. if ($total < 1) {
    3. this.showbutton = false;
    4. }
    5. }

    Now everything should work well!

    Now we have:

    1. A button that loads 8 more items in a lazy way
    2. The button disappears when there is nothing more to load
    3. The button does not appear if the initial number of items is 8 or less

    Thank you for reading this quite long post