jquery implémente la pagination des requêtes-Questions et réponses frontales-php.cn

Avec le développement de l'industrie informatique, les applications Web deviennent de plus en plus populaires. Ces dernières années, en particulier, avec le développement rapide de technologies telles que l'Internet mobile et le Big Data, la demande d'applications Web a également augmenté.

Dans les applications Web, la requête et l'affichage des données sont l'une des fonctions les plus importantes. Dans le cas de grandes quantités de données, la manière d’interroger et d’afficher les données de manière rapide et précise est devenue une question particulièrement importante. La pagination traditionnelle ne peut plus répondre aux besoins des utilisateurs, car la pagination ne peut diviser les données qu'en plusieurs pages pour l'affichage, et les utilisateurs doivent tourner les pages pour afficher toutes les données.

Afin d'améliorer l'effet de requête des utilisateurs, nous pouvons utiliser de nouvelles technologies pour implémenter la fonction de pagination des requêtes. Parmi eux, jQuery est un outil de développement Web très populaire, doté d'une forte interactivité et d'une facilité d'utilisation, qui peut nous aider à mettre en œuvre de meilleures applications Web. Cet article explique comment utiliser jQuery pour implémenter la fonction de pagination des requêtes.

1. La nécessité d'une pagination des requêtes

À mesure que la quantité de données augmente, les résultats de la requête deviennent de plus en plus volumineux. Si vous souhaitez afficher toutes les données de la page en même temps, cela posera des problèmes aux utilisateurs en termes de fluidité et d'acquisition de données. Pour les applications contenant de grandes quantités de données, une méthode courante consiste à résoudre ce problème via la pagination.

Les avantages de la pagination sont :

Améliorer la vitesse d'ouverture des pages et réduire la charge sur le serveur.
L'affichage est plus ordonné, ce qui facilite la visualisation et l'utilisation par les utilisateurs.
La pagination peut interroger avec précision et rapidité les données requises.
La pagination peut utiliser le mécanisme de mise en cache du navigateur pour soulager la pression du serveur et réduire la transmission de données.

Cependant, la pagination ordinaire rend souvent le site Web ennuyeux, le temps d'attente pour le téléchargement est trop long et l'expérience utilisateur n'est pas bonne. Par conséquent, la mise en œuvre de la fonction de pagination des requêtes est cruciale, ce qui peut améliorer l'efficacité des requêtes et l'expérience utilisateur.

2. jQuery implémente la pagination des requêtes

jQuery est une bibliothèque JavaScript largement utilisée pour optimiser et traiter le code JavaScript. La méthode d'utilisation de jQuery pour implémenter la pagination des requêtes est relativement simple et elle est principalement divisée en les étapes suivantes :

Implémentez la requête de données et enregistrez les résultats de la requête dans un tableau.
Générez dynamiquement des pages de résultats de requête, une zone de contrôle de pagination et une barre d'état de pagination.
Selon la demande de requête de l'utilisateur, sélectionnez le nœud de données et créez dynamiquement le nœud de pagination.
Rechargez les données de pagination et mettez à jour dynamiquement la page en fonction de la demande de rotation de page de l'utilisateur.

Ci-dessous, nous présenterons étape par étape comment utiliser jQuery pour implémenter la fonction de pagination des requêtes :

Implémenter la requête de données

Tout d'abord, nous devons enregistrer les données dans un tableau. Pour les applications Web écrites en JavaScript, cela. processus Très simple. Appelez simplement la méthode JSON parse() pour convertir une chaîne au format JSON en un objet JavaScript.

Ce qui suit est un exemple :

let jsonData='[{"name":"张三","age":20,"salary":"5000"},{"name":"李四","age":22,"salary":"6000"},{"name":"王五","age":25,"salary":"8000"},{"name":"赵六","age":27,"salary":"9000"},{"name":"钱七","age":30,"salary":"10000"},{"name":"二哈","age":32,"salary":"12000"},{"name":"三哈","age":35,"salary":"15000"},{"name":"四哈","age":37,"salary":"18000"},{"name":"五哈","age":40,"salary":"20000"},{"name":"六哈","age":42,"salary":"22000"}]';

let data=JSON.parse(jsonData);

Copier après la connexion

Génération dynamique d'éléments de page

La génération dynamique d'éléments de page utilise les opérations DOM dans jQuery, principalement via les méthodes append() et html() dans jQuery. Vous pouvez utiliser la méthode append() pour ajouter de nouveaux nœuds et nœuds enfants, et vous pouvez également utiliser la méthode html() pour modifier le innerHTML du nœud.

Ce qui suit est un exemple :

//动态添加查询结果区域
let $table=$('<table><thead><tr><th>姓名</th><th>年龄</th><th>薪资</th></tr></thead><tbody></tbody></table>');
$container.append($table);
for(let item of data){
  let $tr=$('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.salary+'</td></tr>');
  $table.find('tbody').append($tr);
}

//动态添加分页控制区域
let $pagerBox=$('<div class="pager-box"></div>');
let $prePage=$('<a href="javascript:void(0);" class="pre-page">上一页</a>');
let $nextPage=$('<a href="javascript:void(0);" class="next-page">下一页</a>');
$pagerBox.append($prePage);
for(let i=1;i<=data.length;i++){
  let $pageNode=$('<a href="javascript:void(0);" class="pager-num">'+i+'</a>');
  $pagerBox.append($pageNode);
}
$pagerBox.append($nextPage);
$container.append($pagerBox);

//动态添加分页状态条
let $pageStatus=$('<div class="page-status"><span class="current-page">1</span>/<span class="total-page">'+Math.ceil(data.length/pageSize)+'页</span></div>');
$container.append($pageStatus);

//定义页面元素的CSS样式
$container.css({'text-align':'center','background-color':'#f7f7f7'});
$table.css({'width':'90%','margin':'0 auto','background-color':'#fff','border':'1px solid #ddd','border-radius':'5px'});
$table.find('thead th').css({'padding-top':'10px','padding-bottom':'10px','background-color':'#eee'});

$pagerBox.css({'width':'90%','margin':'20px auto','height':'30px','line-height':'30px'});
$pagerBox.find('.pager-num').css({'width':'30px','text-align':'center','background-color':'#fff','border':'1px solid #ddd','border-radius':'3px','margin':'0 5px'});
$pagerBox.find('.pager-num.active').css({'background-color':'#e4393c','color':'#fff'});
$pagerBox.find('.pre-page,.next-page').css({'display':'inline-block','color':'#333','text-decoration':'none','margin':'0 5px'});

$pageStatus.css({'width':'90%','margin':'10px auto','color':'#999','font-size':'14px'});

Copier après la connexion

Création d'un nœud de pagination

Les nœuds de pagination peuvent être créés dynamiquement via jQuery La méthode click() est utilisée ici pour surveiller l'opération de rotation de page de l'utilisateur.

Voici un exemple :

let $pagerNodes=$('.pager-num');
$pagerNodes.eq(0).addClass('active');
$pagerNodes.click(function(){
  let index=$(this).index();
  let start=(index-1)*pageSize;
  let end=index*pageSize;
  let dataArr=data.slice(start,end);
  $table.find('tbody').html('');
  for(let item of dataArr){
    let $tr=$('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.salary+'</td></tr>');
    $table.find('tbody').append($tr);
  }
  $pagerNodes.removeClass('active');
  $(this).addClass('active');
  $pageStatus.find('.current-page').text(index);
});

Copier après la connexion

Mettre à jour la page

La dernière étape consiste à mettre à jour les données de la page. Nous devons recharger les données de pagination en fonction de la demande de rotation de page de l'utilisateur et mettre à jour dynamiquement la page. Les méthodes addClass() et removeClass() sont utilisées ici pour mettre en évidence la page actuelle.

Ce qui suit est un exemple :

let currentPage=1;
$prePage.click(function(){
  if(currentPage>1){
    currentPage--;
    let index=currentPage-1;
    let start=index*pageSize;
    let end=(index+1)*pageSize;
    let dataArr=data.slice(start,end);
    $table.find('tbody').html('');
    for(let item of dataArr){
      let $tr=$('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.salary+'</td></tr>');
      $table.find('tbody').append($tr);
    }
    $pagerNodes.removeClass('active');
    $pagerNodes.eq(currentPage-1).addClass('active');
    $pageStatus.find('.current-page').text(currentPage);
  }
});

$nextPage.click(function(){
  if(currentPage<Math.ceil(data.length/pageSize)){
    currentPage++;
    let index=currentPage-1;
    let start=index*pageSize;
    let end=(index+1)*pageSize;
    let dataArr=data.slice(start,end);
    $table.find('tbody').html('');
    for(let item of dataArr){
      let $tr=$('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.salary+'</td></tr>');
      $table.find('tbody').append($tr);
    }
    $pagerNodes.removeClass('active');
    $pagerNodes.eq(currentPage-1).addClass('active');
    $pageStatus.find('.current-page').text(currentPage);
  }
});

Copier après la connexion

3. Résumé

La pagination des requêtes est l'une des fonctions courantes des applications Web et est très importante lors du traitement de grandes quantités de données. jQuery est un outil de développement Web très populaire qui peut nous aider à implémenter facilement des fonctions de pagination de requêtes. Grâce à l'introduction de cet article, nous avons appris à utiliser jQuery pour implémenter la fonction de pagination de requêtes, qui implique des opérations telles que la requête de données, la génération dynamique d'éléments de page, la création de nœuds de pagination et la mise à jour dynamique de pages.

L'utilisation de jQuery pour implémenter la pagination des requêtes améliore non seulement l'interactivité et la facilité d'utilisation des applications Web, mais nous offre également plus d'espace de conception. Dans les applications pratiques, la mise en œuvre de la fonction de pagination des requêtes doit également être ajustée et optimisée en fonction des besoins réels. J'espère que cet article sera utile aux lecteurs.

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!