jQuery Girl
  1. jQuery Girl
  3. Créer une pagination ajax
Intereting Posts
Rechercher une valeur basée sur l’entrée et la table de correspondance Boîte de dialog de remplissage CKeditor sélectionnée avec Ajax plugin jQuery qui suggère / autocompletes dans une zone de texte Dépendances de fichiers Javascript – Fichiers de ressources à chargement sélectif et prévention des doublons Supprimer HeatmapLayer de google maps Comment envoyer «non» dans le formulaire lorsque la case à cocher n’est pas cochée dans WordPress Tri avec colonnes cachées dans Dynatable Comment passer ce puzzle en JavaScript? Obtenir toutes les valeurs de liaison de données à l’aide de JQuery Existe-t-il un moyen de faire en sorte que le curseur de l’interface utilisateur jQuery démarre avec 0 en haut au lieu de bas? Comment append un atsortingbut de marque de réservation si le champ «value» est vide Définissez minDate sur Today dans Bootstrap DateTimePicker Déclencher en externe la méthode ‘dayClick’ de FullCalendar? application automatique de la maçonnerie dans le gestionnaire de reliure knockout après la mise à jour dynamic Validateur jQuery – Impossible d’appeler la méthode ‘appel’ d’erreur non définie – lors de l’ajout dynamic de la validation

Créer une pagination ajax

J’essaie de faire une pagination ajax avec le code suivant: 

// AJAX pagination $(".pages .prev").live('click', function(event) { event.preventDefault() var current_page = parseInt(getParameterByName('page'))-1; $.get('/ajax/financial_page/', {'page': current_page}, function(response) { $(".content table").replaceWith(response) }); })

Et à mon avis, fonction: 

 def financial_page(request): """ Returns a single financials page, without extra HTML (used in AJAX calls). """ page = int(request.GET.get('page', 1)) if request.user.is_superuser: fs = FinancialStatements.objects.order_by('-date', 'statement_id') else: up = request.user.get_profile() providers = up.provider.all() fs = FinancialStatements.objects.filter(provider__in=providers).order_by('-date', 'statement_id') fs_objects, current_page_object, page_range = paginator(request, objects=fs, page=page, number_per_page=30) data = { 'fs':fs_objects, 'page_range': page_range, 'current_page': current_page_object, } page = render_to_ssortingng('financial_section.html', data, RequestContext(request)) return HttpResponse(simplejson.dumps([page]))

Cependant, je rencontre deux problèmes. La première est que la response n’est pas vraiment du code HTML et qu’elle contient un groupe de n\t\t\n\t\t\n\t\n\t\n\t\n\t\t\n\t\ , etc. De plus, je ne parviens pas à suivre la page en cours / à modifier l’url au besoin. Comment pourrais-je construire une pagination ajax fonctionnelle ici?

Mise à jour : j’ai compris le premier en faisant response = $.parseJSON(response); . Comment puis-je savoir quelle page je suis sur?

Pour garder une trace de la page, vous pouvez incrémenter / décrémenter une variable au clic avec votre fonction AJAX. Essaye ça: 

 var counter="0"; $(document.body).on('click', ".pages .prev, .pages .next", function(event) { if($(this).hasClass('prev') counter--;// <--decrement for clicking previous button else if($(this).hasClass('next') counter++; // <--increment for clicking next button event.preventDefault() $.get('/ajax/financial_page/', {'page': counter}, function(response) { $(".content table").replaceWith(response) }); })

Je n'utiliserais pas non plus live méthode live car elle est obsolète à partir de jQuery 1.7. Il a été remplacé par la méthode on. Voir l'API jQuery on() ici: http://api.jquery.com/on/

Consultez ce tutoriel sur “Ajax Scroll Paging à l’aide de jQuery, PHP et MySQL”, cela pourrait simplifier votre travail: http://www.bewebdeveloper.com/tutorial-about-ajax-scroll-paging-using-jquery-php-and- mysql

Voici l’essentiel de: 

 var is_loading = false; // initialize is_loading by false to accept new loading var limit = 4; // limit items per page $(function() { $(window).scroll(function() { if($(window).scrollTop() + $(window).height() == $(document).height()) { if (is_loading == false) { // stop loading many times for the same page // set is_loading to true to refuse new loading is_loading = true; // display the waiting loader $('#loader').show(); // execute an ajax query to load more statments $.ajax({ url: 'load_more.php', type: 'POST', data: {last_id:last_id, limit:limit}, success:function(data){ // now we have the response, so hide the loader $('#loader').hide(); // append: add the new statments to the existing data $('#items').append(data); // set is_loading to false to accept new loading is_loading = false; } }); } } }); });

Essayez d’utiliser la méthode javascript Ssortingng.replace (): 

 // AJAX pagination $(".pages .prev").live('click', function(event) { event.preventDefault() var current_page = parseInt(getParameterByName('page'))-1; $.post('/ajax/financial_page/', {'page': current_page}, function(response) { response = response.replace(/\n/g,'
').replace(/\t/,'  '); $(".content table").replaceWith(response) }); }) 
 jQuery.get(url, [data], [callback], [type]) type :xml, html, script, json, text, _default。

que diriez-vous d’essayer de définir le dernier paramètre comme “html”?