Comment réaliser une page de formulaire sans passer à la pagination en php

Avec le développement rapide de la technologie Internet, les pages de formulaire sont devenues une exigence courante pour le développement de sites Web. Dans la page du formulaire, il est généralement nécessaire d'implémenter la fonction de pagination pour mieux afficher les données. Cependant, la méthode de pagination traditionnelle nécessite de passer à une nouvelle page, ce qui peut réduire l'expérience utilisateur et les performances du site Web. En PHP, nous pouvons utiliser la technologie AJAX et les plug-ins de pagination pour créer des pages de formulaire sans passer à la pagination, afin que les utilisateurs puissent utiliser la page plus facilement et, en même temps, améliorer l'efficacité du site Web.

1. Technologie AJAX

AJAX (Asynchronous JavaScript And XML) est une technologie de mise à jour dynamique des pages Web. Elle permet de mettre à jour une partie des données sans actualiser la page entière. De cette façon, nous pouvons implémenter la fonction de pagination sur la page du formulaire sans passer à une nouvelle page.

Lorsque nous utilisons la technologie AJAX pour implémenter la pagination, nous devons d'abord introduire la bibliothèque jQuery et le plug-in de pagination. Parmi elles, jQuery est actuellement l'une des bibliothèques JavaScript les plus populaires, et les plug-ins de pagination peuvent nous aider à implémenter rapidement des fonctions de pagination, telles que le plug-in jQuery Paging couramment utilisé.

Ensuite, voyons comment utiliser AJAX et les plug-ins de pagination pour empêcher les pages de formulaire de passer à la pagination.

2. Étapes de mise en œuvre

1. Préparation

Tout d'abord, nous devons ajouter une zone pour afficher les données et une zone pour afficher la pagination à la page du formulaire. Ici, nous pouvons utiliser des éléments div pour créer deux zones.

<div id="dataArea"></div>
<div id="pagination"></div>

2. Envoyer une requête AJAX

Ensuite, nous devons envoyer une requête AJAX dans le code JavaScript pour obtenir les données paginées. Nous pouvons utiliser la méthode $.ajax() de jQuery pour envoyer une requête et transmettre les paramètres nécessaires, tels que le numéro de page actuelle, le nombre d'éléments de données affichés sur chaque page, etc.

function loadData(page) {
    $.ajax({
        type: "GET",
        url: "data.php",
        data: {
            page: page,
            pageSize: 10
        },
        success: function(data) {
            // 分页数据处理代码
        },
        error: function() {
            alert("获取数据失败！");
        }
    });
}

Lors de l'envoi d'une demande, nous devons spécifier le type de demande et l'adresse de la demande, ainsi que transmettre les paramètres nécessaires. Ici, nous utilisons la méthode de requête GET, spécifions la page de demande de données comme data.php et transmettons le numéro de page actuel et le nombre d'éléments de données affichés sur chaque page comme deux paramètres.

3. Traitement des données de pagination

Lorsque la demande aboutit, nous pouvons traiter les données renvoyées dans la fonction de rappel de réussite. Ici, nous pouvons utiliser les méthodes fournies dans le plug-in de pagination pour restituer les données à l'emplacement correspondant sur la page du formulaire.

function loadData(page) {
    $.ajax({
        type: "GET",
        url: "data.php",
        data: {
            page: page,
            pageSize: 10
        },
        success: function(data) {
            // 将数据渲染到数据区
            $("#dataArea").html(data.data);

            // 渲染分页
            $("#pagination").paging({
                currentPage: page,
                totalPage: data.totalPage,
                callback: function(page) {
                    loadData(page);
                }
            });
        }
    });
}

Ici, nous restituons d'abord les données renvoyées une fois la requête réussie dans la zone de données (les données peuvent devoir être formatées ou autrement traitées en fonction de la situation réelle), puis utilisons la méthode paging() du plug de pagination. -in pour restituer le composant de pagination, en transmettant simultanément le numéro de page actuel et le numéro de page total au composant de pagination. Enfin, nous spécifions la fonction de rappel de pagination Lorsque l'utilisateur clique sur le bouton de pagination, la fonction loadData() sera à nouveau appelée pour obtenir les données correspondantes.

4. Initialiser la page

Afin d'afficher les données de pagination lors du premier chargement de la page, nous devons appeler manuellement la fonction loadData() après le chargement de la page et transmettre le paramètre de numéro de page initial.

$(function() {
    loadData(1);
});

Jusqu'à présent, nous avons implémenté avec succès la fonction de pagination sans sauter sur la page du formulaire. Les utilisateurs peuvent librement changer de numéro de page dans le composant de pagination, et la zone de données mettra automatiquement à jour les données correspondantes en fonction des changements dans les numéros de page.

3. Résumé

Grâce à la méthode de mise en œuvre ci-dessus, nous pouvons implémenter rapidement et simplement la fonction de pagination sans saut dans la page de formulaire, afin que les utilisateurs puissent utiliser la page plus facilement et améliorer l'efficacité du site Web. Bien entendu, lors de l’utilisation réelle, le code doit être modifié et amélioré en fonction des besoins spécifiques de l’entreprise pour obtenir la meilleure expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!