Visualizzazione dei risultati da 1 a 10 su 10
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    92

    ho trovato le pagination!

    ho trovato questo codice ...
    <div class="pagination">
    <ul>
    </ul>
    </div>



    css
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    }

    .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #20B2AA;
    min-height: 100vh;
    padding: 10px;
    }

    .pagination ul {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    padding: 8px;
    border-radius: 50px;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
    }

    .pagination ul li {
    color: #20B2AA;
    list-style: none;
    line-height: 45px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    }

    .pagination ul li.numb {
    list-style: none;
    height: 45px;
    width: 45px;
    margin: 0 3px;
    line-height: 45px;
    border-radius: 50%;
    }

    .pagination ul li.numb.first {
    margin: 0px 3px 0 -5px;
    }

    .pagination ul li.numb.last {
    margin: 0px -5px 0 3px;
    }

    .pagination ul li.dots {
    font-size: 22px;
    cursor: default;
    }

    .pagination ul li.btn {
    padding: 0 20px;
    border-radius: 50px;
    }

    .pagination li.active,
    .pagination ul li.numb:hover,
    .pagination ul li:first-child:hover,
    .pagination ul li:last-child:hover {
    color: #fff;
    background: #20B2AA;
    }

    javascript

    // selecting required element
    const element = document.querySelector(".pagination ul");
    let totalPages = 20;
    let page = 10;

    //calling function with passing parameters and adding inside element which is ul tag
    element.innerHTML = createPagination(totalPages, page);

    function createPagination(totalPages, page) {
    let liTag = '';
    let active;
    let beforePage = page - 1;
    let afterPage = page + 1;
    if (page > 1) { //show the next button if the page value is greater than 1
    liTag += `<li class="btn prev" onclick="createPagination(totalPages, ${page - 1})"><span><i class="fas fa-angle-left"></i> Prev</span></li>`;
    }

    if (page > 2) { //if page value is less than 2 then add 1 after the previous button
    liTag += `<li class="first numb" onclick="createPagination(totalPages, 1)"><span>1</span></li>`;
    if (page > 3) { //if page value is greater than 3 then add this (...) after the first li or page
    liTag += `<li class="dots"><span>...</span></li>`;
    }
    }

    // how many pages or li show before the current li
    if (page == totalPages) {
    beforePage = beforePage - 2;
    } else if (page == totalPages - 1) {
    beforePage = beforePage - 1;
    }
    // how many pages or li show after the current li
    if (page == 1) {
    afterPage = afterPage + 2;
    } else if (page == 2) {
    afterPage = afterPage + 1;
    }

    for (var plength = beforePage; plength <= afterPage; plength++) {
    if (plength > totalPages) { //if plength is greater than totalPage length then continue
    continue;
    }
    if (plength == 0) { //if plength is 0 than add +1 in plength value
    plength = plength + 1;
    }
    if (page == plength) { //if page is equal to plength than assign active string in the active variable
    active = "active";
    } else { //else leave empty to the active variable
    active = "";
    }
    liTag += `<li class="numb ${active}" onclick="createPagination(totalPages, ${plength})"><span>${plength}</span></li>`;
    }

    if (page < totalPages - 1) { //if page value is less than totalPage value by -1 then show the last li or page
    if (page < totalPages - 2) { //if page value is less than totalPage value by -2 then add this (...) before the last li or page
    liTag += `<li class="dots"><span>...</span></li>`;
    }
    liTag += `<li class="last numb" onclick="createPagination(totalPages, ${totalPages})"><span>${totalPages}</span></li>`;
    }

    if (page < totalPages) { //show the next button if the page value is less than totalPage(20)
    liTag += `<li class="btn next" onclick="createPagination(totalPages, ${page + 1})"><span>Next <i class="fas fa-angle-right"></i></span></li>`;
    }
    element.innerHTML = liTag; //add li tag inside ul tag
    return liTag; //reurn the li tag
    }


    solo che dove si inserisce href="";?

  2. #2
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,415
    Ciao quiris,
    utilizza, per la formattazione del codice, l'apposito tag code del forum. Fare copia incolla del codice da un IDE nel browser lo rende spesso, come nel tuo caso, illegibile.

    Aggiungo inoltre che non hai messo un riferimento alla libreria da cui hai fatto quel codice. Probabilmente ci sarà un evento click da gestire.
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  3. #3
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    92
    ciao ciro78 ti ringrazio per aver risposto non mi è ben chiaro come fare a postare il codice da come ho capito clicco sul tasto code e poi cosa faccio inserisco il codice copiato tra i tag ?

    hai detto un evento al click da gestire se è cosi come faccio? href?

  4. #4
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    92
    la libreria del codice copiato è https://codepen.io/fadzrinmadu/pen/KKWvYqW

  5. #5
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,415
    sil il codice lo inserisci come dici. ovviamente non copiarlo direttamente dalla pagina che hai postato. mettilo prima in un blocco note. altrimenti si prende la formattazione e non si vede nulla.

    in merito all'href ogni volta che premi uno dei pulsante della paginazione richiama il metodo

    createPagination

    quindi la tua logica va li. ma occhio. tale paginazione non è fatta per href (cambio pagina) ma probabilmente per gestire una chiamata ajax
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  6. #6
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    92
    ho cercato su internet in pratica stai parlando di una funzione javascript Ajax e ho trovato questo credo che fa al caso mio ma non so come?

    $.ajax({
    url: server_url + '/ws_report',
    timeout:30000,
    type: "POST",
    data: {"client_language": client_language, "PIN_code"in,"client_phone":number},
    success : function(msg) {
    //alert(JSON.stringify(msg));
    if (msg.ws_resultat.result_ok == true)
    {
    alert('success!');
    window.open("account_details.html");
    }
    },
    error: function(jqXHR, textStatus)
    {
    alert('Error Occured'); //MESSAGE
    }
    }
    });
    devo l'asciarlo cosi ho devo modificarlo?
    puoi darmi una sintassi del codice da inserire? grazie..
    https://stackoverflow.com/questions/...nction-in-href ------->questo è il sito dove ho trovato il codice ajax

  7. #7
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    92
    ho trovato anche questo puoi dirmi se è quello giusto...
    $('a').click(function(event) {
    event.preventDefault();
    $.ajax({
    url: $(this).attr('href'),
    success: function(response) {
    alert(response);
    }
    });
    return false; // for goo

    grazie...

  8. #8

  9. #9
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,415
    quiris secondo me devi studiare prima un po per poter fare certe cose. non basta copiare codice qui e li. in questa sezione del forum si aiuta a capire errori.

    ad ogni modo

    codice:
    $.ajax({
    url: tuourl?pag=XXX,
    success: function(response) {
    alert(response);
    }
    solo questo sarebbe necessario. ma il discorso è complesso perchè la paginazione che hai postato, viene rigenerata anche quando clicchi sui puntini piuttosto che una pagina. bisognerebbe gestire anche next e previous nonchè first e last.

    ... insomma non si diventa programmatori dall'oggi al domani
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  10. #10
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    92
    Grazie lo stesso mi orienteró su del codice più semplice, per me è difficile non conoscendo i termini adeguati anche perchè nel web ci sono tag che sono abbreviazioni e non capisco. Grazie comunque chiudo il topic, Buona giornata.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.