Codice javascript pagination

di
quiris
il
4 risposte
Q
quiris
Pochi posts
Iscritto da
dic, 2021
Messaggi:
4

Codice javascript pagination

Ho un sito in locale e sono sulla parte javascript della pagination solo che non la capisco essendo alle prime armi e non so gestirla ho provato a fare ricerche ma non ho trovato quello che fa al caso mio. cerco un script di javascript semplice.
la parte di codice html da gestire è questa
<!--------------------------------Navigation--------------------------->
<nav class="nav">
<div class="nav-menu flex-row">
<div class="nav-brand">
<a href="#" class="text-gray">goldengreen</a>
</div>
<div class="toggle-collapse">
<div class="toggle-icons">
<i class="fas fa-bars"></i>
</div>
</div>
<div>
<ul class="nav-items">
<li class="nav-link">
<a href="#">home</a>
</li>
<li class="nav-link">
<a href="#">categoria</a>
</li>
<li class="nav-link">
<a href="#">archivio</a>
</li>
<li class="nav-link">
<a href="#">Pagine</a>
</li>
<li class="nav-link">
<a href="#">contatti</a>
</li>
</ul>
</div>
<div class="social text-gray">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</nav>
<!---------------x-----------------Navigation--------------x------------->


<!--------------------------------main site section--------------------------->


<main>
<!--------------------------------titolo sito--------------------------->
<section class="site-title">
<div class="site-backgroud" data-aos="fade-up" data-aos-delay="100">
<h3>...</h3>
<h1>...</h1>
<button class="btn">Cerca</button>
</div>
</section>
<!---------------x-----------------titolo sito--------------x------------->
<!---blog carousel-->
<section>
<div class="blog">
<div class="container">
<div class="owl-carousel owl-theme blog-post">
<div class="blog-content" data-aos="fade-right" data-aos-delay="200">
<img src="" alt="">
<div class="blog-title">
<h3>...</h3>
<button class="btn btn-blog">...</button>
<span>...</span>
</div>
</div>
<div class="blog-content" data-aos="fade-right" data-aos-delay="200">
<img src="" alt="">
<div class="blog-title">
<h3>...</h3>
<button class="btn btn-blog">...</button>
<span>...</span>
</div>
</div>
<div class="blog-content" data-aos="fade-left" data-aos-delay="200">
<img src="" alt="">
<div class="blog-title">
<h3>...</h3>
<button class="btn btn-blog">...</button>
<span>...</span>
</div>
</div>
<div class="blog-content" data-aos="fade-left" data-aos-delay="200">
<img src="" alt="">
<div class="blog-title">
<h3>...</h3>
<button class="btn btn-blog">...</button>
<span>...</span>
</div>
</div>
<div class="blog-content" data-aos="fade-right" data-aos-delay="200">
<img src="" alt="">
<div class="blog-title">
<h3>...</h3>
<button class="btn btn-blog">...</button>
<span>...</span>
</div>
</div>
</div>
<div class="owl-navigation">
<span class="owl-nav-prev"><i class="fas fa-long-arrow-alt-left"></i></span>
<span class="owl-nav-next"><i class="fas fa-long-arrow-alt-right"></i></span>
</div>
</div>
</div>
</section>

<!--x-blog carousel-x->
<!--site content-->
<section class="container">
<div class="site-content">
<div class="posts">
<div class="post-content" data-aos="zoom-in" data-aos-delay="200">
<div class="post-image">
<div class="size">
<img src="assets/cookies.png" alt="">
</div>
<div class="post-info flex-row">
<span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;admin</span>
<span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;gennaio 1, 2022</span>
<span> 2 commenti </span>
</div>
</div>
<div class="post-title">
<a href="#">......</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam rerum fugiat fugit.
</p>
<button class="btn post-btn">Read more &nbsp;<i class="fas fa-arrow-right"></i></button>
</div>
</div>
<hr>
<div class="post-content" data-aos="zoom-in" data-aos-delay="200">
<div class="post-image">
<div class="size">
<img src="assets/cookies.png" alt="">
</div>
<div class="post-info flex-row">
<span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;admin</span>
<span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;gennaio 1, 2022</span>
<span> 2 commenti </span>
</div>
</div>
<div class="post-title">
<a href="#">......</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam rerum fugiat fugit.
</p>
<button class="btn post-btn">Read more &nbsp;<i class="fas fa-arrow-right"></i></button>
</div>
</div>
<hr>
<div class="post-content" data-aos="zoom-in" data-aos-delay="200">
<div class="post-image">
<div class="size">
<img src="assets/cookies.png" alt="">
</div>
<div class="post-info flex-row">
<span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;admin</span>
<span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;gennaio 1, 2022</span>
<span> 2 commenti </span>
</div>
</div>
<div class="post-title">
<a href="#">......</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam rerum fugiat fugit.
</p>
<button class="btn post-btn">Read more &nbsp;<i class="fas fa-arrow-right"></i></button>
</div>
</div>
<hr>
<div class="post-content" data-aos="zoom-in" data-aos-delay="200">
<div class="post-image">
<div class="size">
<img src="assets/cookies.png" alt="">
</div>
<div class="post-info flex-row">
<span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;admin</span>
<span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;gennaio 1, 2022</span>
<span> 2 commenti </span>
</div>
</div>
<div class="post-title">
<a href="#">......</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam rerum fugiat fugit.
</p>
<button class="btn post-btn">Read more &nbsp;<i class="fas fa-arrow-right"></i></button>
</div>
</div>
<div class="pagination flex-row">
<a href="#"><i class="fas fa-chevron-left"></i></a>
<a href="#" class="pages">1</a>
<a href="#" class="pages">2</a>
<a href="#" class="pages">3</a>
<a href="#" class="pages">4</a>
<a href="#" class="pages">5</a>
<a href="#"><i class="fas fa-chevron-right"></i></a>
</div>
</div>
<aside class="sidebar">
<div class="category">
<h2>categorie</h2>
<ul class="category-list">
<li class="list-items" data-aos="fade-left" data-aos-delay="100">
<a href="">software</a>
<span>(05)</span>
</li>
<li class="list-items" data-aos="fade-left" data-aos-delay="200">
<a href="">Tecnology</a>
<span>(02)</span>
</li>
<li class="list-items" data-aos="fade-left" data-aos-delay="300">
<a href="">Lifestyle</a>
<span>(07)</span>
</li>
<li class="list-items" data-aos="fade-left" data-aos-delay="400">
<a href="">Shopping</a>
<span>(01)</span>
</li>
<li class="list-items" data-aos="fade-left" data-aos-delay="500">
<a href="">Food</a>
<span>(08)</span>
</li>
<li class="list-items" data-aos="fade-left" data-aos-delay="600">
<a href="">Green</a>
<span>(15)</span>
</li>
</ul>
</div>
<div class="popular-post">
<h2>Popular Post</h2>
<div class="post-content" data-aos="flip-up" data-aos-delay="200">
<div class="post-image">
<div class="size">
<img src="assets/cookies.png" alt="">
</div>
<div class="post-info flex-row">
<span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;admin</span>
<span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;gennaio 1,
2022</span>
<span> 2 commenti </span>
</div>
</div>
<div class="post-title">
<a href="#">......</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam rerum fugiat
fugit.
</p>
<button class="btn post-btn">Read more &nbsp;<i class="fas fa-arrow-right"></i></button>
</div>
</div>
<div class="post-content" data-aos="flip-up" data-aos-delay="300">
<div class="post-image">
<div class="size">
<img src="assets/cookies.png" alt="">
</div>
<div class="post-info flex-row">
<span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;admin</span>
<span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;gennaio 1,
2022</span>
<span> 2 commenti </span>
</div>
</div>
<div class="post-title">
<a href="#">......</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam rerum fugiat
fugit.
</p>
<button class="btn post-btn">Read more &nbsp;<i class="fas fa-arrow-right"></i></button>
</div>
</div>
<div class="post-content" data-aos="flip-up" data-aos-delay="400">
<div class="post-image">
<div class="size">
<img src="assets/cookies.png" alt="">
</div>
<div class="post-info flex-row">
<span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;admin</span>
<span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;gennaio 1,
2022</span>
<span> 2 commenti </span>
</div>
</div>
<div class="post-title">
<a href="#">......</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam rerum fugiat
fugit.
</p>
<button class="btn post-btn">Read more &nbsp;<i class="fas fa-arrow-right"></i></button>
</div>
</div>
<div class="post-content" data-aos="flip-up" data-aos-delay="500">
<div class="post-image">
<div class="size">
<img src="assets/cookies.png" alt="">
</div>
<div class="post-info flex-row">
<span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;admin</span>
<span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;gennaio 1,
2022</span>
<span> 2 commenti </span>
</div>
</div>
<div class="post-title">
<a href="#">......</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam rerum fugiat
fugit.
</p>
<button class="btn post-btn">Read more &nbsp;<i class="fas fa-arrow-right"></i></button>
</div>
</div>
<div class="post-content" data-aos="flip-up" data-aos-delay="600">
<div class="post-image">
<div class="size">
<img src="assets/cookies.png" alt="">
</div>
<div class="post-info flex-row">
<span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;admin</span>
<span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;gennaio 1,
2022</span>
<span> 2 commenti </span>
</div>
</div>
<div class="post-title">
<a href="#">......</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam rerum fugiat
fugit.
</p>
<button class="btn post-btn">Read more &nbsp;<i class="fas fa-arrow-right"></i></button>
</div>
</div>
</div>
<div class="newsletter" data-aos="fade-up" data-aos-delay="300">
<h2>Newsletter</h2>
<div class="form-element">
<input type="text" class="input-element" placeholder="Email">
<button class="btn form-btn">Subscribe</button>
</div>
</div>
<div class="popular-tags">
<h2>popular tags</h2>
<div class="tags flex-row">
<span class="tag" data-aos="flip-up" data-aos-delay="100">Software</span>
<span class="tag" data-aos="flip-up" data-aos-delay="200">Tecnology</span>
<span class="tag" data-aos="flip-up" data-aos-delay="300">Travel</span>
<span class="tag" data-aos="flip-up" data-aos-delay="400">Illustartion</span>
<span class="tag" data-aos="flip-up" data-aos-delay="500">design</span>
<span class="tag" data-aos="flip-up" data-aos-delay="600">Lifestyle</span>
<span class="tag" data-aos="flip-up" data-aos-delay="700">love</span>
<span class="tag" data-aos="flip-up" data-aos-delay="800">project</span>
</div>
</div>
</aside>
</div>
</section>

<!--x-site content-x->


</main>

<!---------------x-----------------main site section--------------x------------->

<!--------------------------------Footer--------------------------->


<footer class="footer">
<div>
<div class="container">
<div class="about-us" data-aos="fade-right" data-aos-delay="200">
<h2>about us</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis tempora assumenda,
perferendis dolorem ea saepe nostrum natus quaerat illo perspiciatis nemo quas porro
labore esse iste rerum quae! Obcaecati, tempora!</p>
</div>
<div class="newsletter" data-aos="fade-right" data-aos-delay="200">
<h2>newsletter</h2>
<p>Stay uptade with our latest</p>
<div class="form-element">
<input type="text" placeholder="Email"><span><i class="fas fa-chevron-right"></i></span>
</div>
</div>
<div class="instagram" data-aos="fade-left" data-aos-delay="200">
<h2>instagram</h2>
<div class="flex-row">
<img src="assets/cookies.png" alt="">
<img src="assets/cookies.png" alt="">
<img src="assets/cookies.png" alt="">
</div>
<div class="flex-row">
<img src="assets/cookies.png" alt="">
<img src="assets/cookies.png" alt="">
<img src="assets/cookies.png" alt="">
</div>
</div>
<div class="follow" data-aos="fade-left" data-aos-delay="200">
<h2>follow us</h2>
<div>
<p>Let us be social</p>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
<div class="rights flex-row">
<h4 class="text-gray">© Tutti i diritti sono riservati | 1\1\2022 | quiris</h4>
</div>
<div class="move-up">
<span><i class="fas fa-arrow-circle-up fa-2x"></i></span>
</div>
</footer>

4 Risposte

  • Q
    quiris
    Pochi posts
    Iscritto da
    dic, 2021
    Messaggi:
    4

    Re: Codice javascript pagination

    Ho trovato anche una libreria javascript https://beneverard.github.io/jqPagination/#customisation ma non è collegato alle pagine, non essendo esperto e qui chiedo a voi credo che devo includere un file json che ho nella cartella del download ma come devo compilarlo e la chiamata nel javascript che adesso posto e come devo compilarla giusta vi ringrazio in primis.

    $.ajax({
    type: 'GET',
    url: "https://github.com/beneverard/jqPaginatio",
    data: {
    get_param: 'value'
    },
    success: function (data) {
    var names = data
    $('').html(data);
    }
    });
    json------------------------------------------------------------------------------------------
    {
    "name": "jqpagination",
    "version": "1.4.1",
    "title": "jqPagination",
    "author": {
    "name": "Ben Everard",
    "url": ""
    },
    "licenses": [{
    "type": "GPLv3",
    "url": "https://raw.github.com/beneverard/jqPagination/master/LICENSE"
    }],
    "dependencies": {
    "jquery": "1.7.2"
    },
    "description": "jqPagination is a jQuery plugin that provides a newer method of pagination for your web site or application.",
    "keywords": [
    "jqpagination",
    "pagination"
    ],
    "homepage": "",
    "demo": "",
    "download": "",
    "bugs": ""
    }
  • Q
    quiris
    Pochi posts
    Iscritto da
    dic, 2021
    Messaggi:
    4

    Re: Codice javascript pagination

    Non capisco ho utilizzato questo codice ma mi mostra una pagina bianca cosa devo aggiungere?

    //document ready
    $(".pagination").custumPaginate({


    itemsToPaginate: " "

    });




    (
    function ($) {
    $.fn.custumPaginate = function (option) {
    var paginationContainer = this;
    var itemsToPaginate;
    var deafaults = {
    itemsPerpage = 5
    };
    var settings = {};
    $.extend(settings, deafaults, option);


    var itemsPerpage = settings.itemsPerpage;

    paginationContainer = $(settings.paginationContainer);

    var numberOfPaginationLinks = math.ceil(
    (itemsToPaginate.length / itemsPerpage)
    );


    $("<ul></ul>").prependTo(paginationContainer);

    for (var index = 0; index < numberOfPaginationLinks; i++) {

    paginationContainer.find("ul").append("<li>" + (index + 1) + "</li>");
    }


    itemsToPaginate.filter(":gt(" + (itemsPerpage - 1) + ")")
    paginationContainer.find("ul li").on('click', function () {

    var LinkNumber = $(this).text();
    var itemsToHide = itemsToPaginate.filter(":it(" + (LinkNumber + settings.itemsPerpage - 1) + ")");
    $.merge(itemsToHide, itemsToPaginate.filter(":gt(" + ((LinkNumber + settings.itemsPerpage) - 1) + ")"))
    itemsToHide.hide();
    var itemsToShow = itemsToPaginate.not(itemsToHide);
    itemsToShow.show();
    });
    }
    }(JQuery));
  • Q
    quiris
    Pochi posts
    Iscritto da
    dic, 2021
    Messaggi:
    4

    Re: Codice javascript pagination

    Con questo codice dovrebbe funzionare... ma non è cosi come mai? chi mi aiuta grazie
  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3096

    Re: Codice javascript pagination

    quiris ha scritto:

    Con questo codice dovrebbe funzionare... ma non è cosi come mai? chi mi aiuta grazie
    Se continui a pubblicare sbrodolate e sbrodolate di codice, senza formattarlo (quindi illeggibile), riferito a esempi che hai trovato in rete e su cui non hai fatto un minimo di ragionamento né ti sei documentato anche solo a livello base prima di utilizzarlo, dubito che otterai tantissimo aiuto in generale.

    Spiega bene cosa vuoi fare, ossia cosa devi paginare e come, parti da una pagina valida in termini strutturali, documentati su JQuery (visto che stai usando questa libreria) e prova a buttare giù del codice di esempio; in caso di errori o problemi, riporta la parte saliente del codice (non necessariamente tutto) e usa il tasto apposito per formattarla sul forum, dopodiché indica quello che non va o si comporta diverso da come ti aspetti.

    In tutti gli altri termini, al netto di fare le cose al posto tuo, non credo ci sia un modo efficace di aiutarti con le poche cose che hai fornito di tuo.

    Ciao!
Devi accedere o registrarti per scrivere nel forum
4 risposte