Affichage réponses

Bonjour,
Sur ce même site il y a un tutoriel sur la pagination

Carouge10 merci de ta réponse.
C'est pas une pagination qui m'intéresse. Je veux tout soit sur la même page juste que les réponses suivantes de ma requête soient cachées comme un espèce de div qui fasse un chargement. Je ne crois pas être très clair avec cette dernière phrase.

Bonjour.
Il va donc te falloir utiliser du JavaScript alors, si tu ne connais pas le langage je t'invite à l'étudier et pour ça il y a justement une formation sur le site.

Salut, la pagination serait la meilleur solution mais tu peut limiter les resultats en utilisant LIMIT

Exemple de code:

SELECT * FROM t_item LIMIT 20

Mais ça va te donné plus de traivail

Pour le bouton (genre plus de figurines) vous pouvez faire de sorte que chaque fois que l'on clique sur le bouton tu imcremente de 20

Bon à vous de voir comment faire .

Bonjour AmiiboActu, je crois avoir compris ton objectif.

Tu souhaite avoir tout le listing des figurines sur la même page mes en garder 20 puis utiliser un button que tu cliquera pour charger + de figurine ?

Si oui, il faut que tu utilise le lazy loading en javascipt.
Le Lazy Loading est une technique en performance web qui permet de cacher les images qui ne sont pas encore afficher à l’écran. Donc permettre d'alléger l'exécution de l'affichage côtés server/client et donc une navigation plus rapide ;).

Exemple sans button :
(rapidité + 10% voir 12% selon des informations)

<!-- Tu donnera une classe déterminé pour chaque image exemple class="lazy-load" -->
<!-- La source de l'image, (si charger depuis database dynamiquement tu les distinguera par id) -->
<!-- ATTENTION ! La data-src est différent de src, elle est utile que pour du scripting ou du styling car tu utilise une data invisible ;) exemple data-src="/img/ton_image.extension" -->
<img class="lazy-load" src="/img/ton_images.extension" alt="" data-src="/img/ton_image.extension" />
<img class="lazy-load" src="/img/ton_images.extension" alt="" data-src="/img/ton_image.extension" />

Voici le javascript en question :

< script >
    ! function() {
        function e(e) {
            var t = 0;
            if (e.offsetParent) {
                do t += e.offsetTop; while (e = e.offsetParent);
                return t
            }
        }
        var t = window.addEventListener || function(e, t) {
                window.attachEvent("on" + e, t)
            },
            o = window.removeEventListener || function(e, t, o) {
                window.detachEvent("on" + e, t)
            },
            n = {
                cache: [],
                mobileScreenSize: 500,
                addObservers: function() {
                    t("scroll", n.throttledLoad), t("resize", n.throttledLoad)
                },
                removeObservers: function() {
                    o("scroll", n.throttledLoad, !1), o("resize", n.throttledLoad, !1)
                },
                throttleTimer: (new Date).getTime(),
                throttledLoad: function() {
                    var e = (new Date).getTime();
                    e - n.throttleTimer >= 200 && (n.throttleTimer = e, n.loadVisibleImages())
                },
                loadVisibleImages: function() {
                    for (var t = window.pageYOffset || document.documentElement.scrollTop, o = window.innerHeight || document.documentElement.clientHeight, r = {
                            min: t - 300,
                            max: t + o + 300
                        }, i = 0; i < n.cache.length;) {
                        var a = n.cache[i],
                            c = e(a),
                            l = a.height || 0;
                        if (c >= r.min - l && c <= r.max) {
                            var s = a.getAttribute("data-src-mobile");
                            a.onload = function() {
                            // Ici tu change la classe si tu la changer pour les images dans le fichier html
                                this.className = "lazy-loaded"
                            }, s && screen.width <= n.mobileScreenSize ? a.src = s : a.src = a.getAttribute("data-src"), a.removeAttribute("data-src"), a.removeAttribute("data-src-mobile"), n.cache.splice(i, 1)
                        } else i++
                    }
                    0 === n.cache.length && n.removeObservers()
                },
                init: function() {
                    document.querySelectorAll || (document.querySelectorAll = function(e) {
                        var t = document,
                            o = t.documentElement.firstChild,
                            n = t.createElement("STYLE");
                        return o.appendChild(n), t.__qsaels = [], n.styleSheet.cssText = e + "{x:expression(document.__qsaels.push(this))}", window.scrollBy(0, 0), t.__qsaels
                    }), t("load", function e() {
                        for (var t = document.querySelectorAll("img[data-src]"), r = 0; r < t.length; r++) {
                            var i = t[r];
                            n.cache.push(i)
                        }
                        n.addObservers(), n.loadVisibleImages(), o("load", e, !1)
                    })
                }
            };
        n.init()
    }(); 
< /script>

Je ne détails pas le code javascript par flemme mais surtout sommeil xD

Exemple avec button :
(plus simple, moins de config, mais plus lourd car tu chargera 10 fichiers ou plus en même temps)

<!-- Simple <div>Content</div> --> que tu changera en <img src="/img/ton_image.extension" alt="" /> -->
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>

<!-- Le button More qui te permettra de charger plus de <div>Content</div> sur l'exemple que je te donne -->
<a href="#" id="loadMore">Load More</a>

Voic le javascript :

$(function () {

// Tu changera pour toi $("div").slice(0, 4) par $("img").slice(0, 20) car tu charge des img depuis 0 à 20 
    $("div").slice(0, 4).show();

    // ID du button à changer selon l'ID donnée dans le html
    $("#loadMore").on('click', function (e) {
        e.preventDefault();

        // Tu changera pour toi $("div:hidden").slice(0, 4) par $("img:hidden").slice(0, 20) car tu charge des img depuis 0 à 20 
        $("div:hidden").slice(0, 4).slideDown();

        // Petite Animation
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});

Voilà normalement j'ai répondue à tes attentes, si besoin d'aide sur autre chose n'hésite pas m'ajouter discord : ࿇ ࿇ YeQiu࿇ ࿇#5693

N'oublie pas de mettre ton sujet en résolue si ma réponse t'as aidé.