recherche

Maison  >  Article  >  interface Web  >  Comment implémenter la pagination Ajax sans actualiser

Comment implémenter la pagination Ajax sans actualiser

php中世界最好的语言
php中世界最好的语言original
2018-04-04 13:37:351111parcourir

Cette fois, je vais vous montrer comment implémenter la pagination Ajax sans actualisation, et quelles sont les précautions pour implémenter la pagination Ajax sans actualisation. Voici des cas pratiques, jetons un coup d'œil.

Suite à l'article précédent - Code Java+Oracle pour implémenter la pagination (2) sur les principes et la mise en œuvre de la technologie de pagination, cet article continue d'analyser la technologie de pagination. L'article précédent parlait de l'implémentation du code de la technologie de pagination. Cet article continue d'analyser le contrôle des effets de la technologie de pagination.
Dans l'article précédent, nous avons simplement implémenté une pagination à l'aide de code. Mais nous avons tous vu que chaque fois que l'ensemble de résultats est obtenu via une requête de servlet dans le code, il sera redirigé vers une page jsp pour afficher les résultats, de sorte que la page sera actualisée à chaque fois que la requête apparaît. après avoir interrogé l'ensemble de résultats et consulté la troisième page, la page sera actualisée. L'effet de cette page sera un peu inconfortable, nous espérons donc que quelle que soit la page accessible après avoir interrogé l'ensemble de résultats via des conditions, la page ne sera pas actualisée, mais seul l'ensemble de résultats changera. Pour résoudre ce problème, je pense que tout le monde pensera facilement à l’Ajax.
Oui, nous devons demander à l’Ajax de sortir. Une fois l'ensemble de résultats interrogé via les conditions de requête, chaque visite ultérieure sur n'importe quelle page sera accessible via Ajax. Asynchrone est utilisé pour interagir avec le servlet, et les résultats sont interrogés et renvoyés à Ajax. change car Ajax renvoie les résultats et La page ne sera pas actualisée, ce qui implémente la technologie de pagination sans actualisation.
Regardons une implémentation simple de pagination sans actualisation. Le code est le suivant : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="../lib/jquery_pagination/pagination.css" mce_href="lib/jquery_pagination/pagination.css" />
 <mce:script type="text/<a href="http://lib.csdn.net/base/javascript" class=&#39;replace_word&#39; title="JavaScript知识库" target=&#39;_blank&#39; style=&#39;color:#df3434; font-weight:bold;&#39;>JavaScript</a>" src="../lib/<a href="http://lib.csdn.net/base/jquery" class=&#39;replace_word&#39; title="jQuery知识库" target=&#39;_blank&#39; style=&#39;color:#df3434; font-weight:bold;&#39;>jQuery</a>/jquery.min.js" mce_src="lib/jquery/jquery.min.js"></mce:script>
 <mce:script type="text/javascript"
  src="../lib/jquery_pagination/jquery.pagination.js"></mce:script>
 <mce:script type="text/javascript"><!--
 /**
 * Callback function that displays the content.
 *
 * Gets called every time the user clicks on a pagination link.
 *
 * @param {int}page_index New Page index
 * @param {jQuery} jq the <a href="http://lib.csdn.net/base/docker" class=&#39;replace_word&#39; title="Docker知识库" target=&#39;_blank&#39; style=&#39;color:#df3434; font-weight:bold;&#39;>Container</a> with the pagination links as a jQuery object
 */
 function pageselectCallback(page_index, jq) {
 var new_content = $('#hiddenresult p.result:eq(' + page_index + ')')
  .clone();
 $('#Searchresult').empty().append(new_content);
 return false;
 }
 function initPagination() {
 var num_entries = $('#hiddenresult p.result').length;
 // Create pagination element
 $("#Pagination").pagination(num_entries, {
  num_edge_entries : 2,
  num_display_entries : 8,
  callback : pageselectCallback,
  items_per_page : 1
 });
 }
 // When the HTML has loaded, call initPagination to paginate the elements    
 $(document).ready(function() {
 initPagination();
 });
// --></mce:script>
 <mce:style type="text/css"><!--
* {
 padding: 0;
 margin: 0;
}
body {
 background-color: #fff;
 margin: 20px;
 padding: 0;
 height: 100%;
 font-family: Arial, Helvetica, sans-serif;
}
#Searchresult {
 margin-top: 15px;
 margin-bottom: 15px;
 border: solid 1px #eef;
 padding: 5px;
 background: #eef;
 width: 40%;
}
#Searchresult p {
 margin-bottom: 1.4em;
}
--></mce:style><style type="text/css" mce_bogus="1">* {
 padding: 0;
 margin: 0;
}
body {
 background-color: #fff;
 margin: 20px;
 padding: 0;
 height: 100%;
 font-family: Arial, Helvetica, sans-serif;
}
#Searchresult {
 margin-top: 15px;
 margin-bottom: 15px;
 border: solid 1px #eef;
 padding: 5px;
 background: #eef;
 width: 40%;
}
#Searchresult p {
 margin-bottom: 1.4em;
}</style>
 <title>Pagination</title>
 </head>
 <body>
 <h4>
  jQuery Pagination Plugin Demo
 </h4>
 <p id="Pagination" class="pagination">
 </p>
 <br style="clear: both;" mce_style="clear: both;" />
 <p id="Searchresult">
  This content will be replaced when pagination inits.
 </p>
 <p id="hiddenresult" style="display: none;" mce_style="display: none;">
  <p class="result">
  <p>
   Globally maximize granular "outside the box" thinking vis-a-vis
   quality niches. Proactively formulate 24/7 results whereas 2.0
   catalysts for change. Professionally implement 24/365 niches rather
   than client-focused users.
  </p>
  <p>
   Competently engineer high-payoff "outside the box" thinking through
   cross functional benefits. Proactively transition intermandated
   processes through open-source niches. Progressively engage
   maintainable innovation and extensible interfaces.
  </p>
  </p>
  <p class="result">
  <p>
   Credibly fabricate e-business models for end-to-end niches.
   Compellingly disseminate integrated e-markets without ubiquitous
   services. Credibly create equity invested channels with
   multidisciplinary human capital.
  </p>
  <p>
   Interactively integrate competitive users rather than fully tested
   infomediaries. Seamlessly initiate premium functionalities rather
   than impactful architectures. Rapidiously leverage existing
   resource-leveling processes via user-centric portals.
  </p>
  </p>
  <p class="result">
  <p>
   Monotonectally initiate unique e-services vis-a-vis client-centric
   deliverables. Quickly impact parallel opportunities with B2B
   bandwidth. Synergistically streamline client-focused
   infrastructures rather than B2C e-commerce.
  </p>
  <p>
   Phosfluorescently fabricate 24/365 e-business through 24/365 total
   linkage. Completely facilitate high-quality systems without
   stand-alone strategic theme areas.
  </p>
  </p>
 </p>
 </body>
</html>

Il s'agit d'une implémentation de pagination sans actualisation très simple, utilisant le framework JQuery+ jquery.pagination. Maintenant, avec la popularité des frameworks, en particulier celle de Jquery, il est très efficace d'utiliser des frameworks pour le développement. Le principe du code ci-dessus a été commenté dans le code. Vous pouvez également vous référer au site officiel de Jquery :.
Nous pouvons maintenant développer notre implémentation de pagination sans actualisation Ajax. Sur la base du principe ci-dessus, dans pageselectCallback() dans le code qui répond au numéro de page pressé, nous utilisons un Ajax pour accéder de manière asynchrone à la base de données, extrayons le résultat défini via le numéro de page cliqué, puis le définissons sur la page. de manière asynchrone, afin qu'aucune actualisation ne puisse être effectuée.

La fonction de réponse pageselectCallback() lorsque le numéro de page est enfoncé est modifiée comme suit :

De cette façon, les résultats peuvent être obtenus de manière asynchrone et la fonction showResponse est utilisée pour traiter les résultats. La fonction showResponse est la suivante : 

function showResponse(request){
   var content = request;
   var root = content.documentElement;
   var responseNodes = root.getElementsByTagName("root");
   var itemList = new Array();
   var pageList=new Array();
   alert(responseNodes.length);
   if (responseNodes.length > 0) {
    var responseNode = responseNodes[0];
    var itemNodes = responseNode.getElementsByTagName("data");
    for (var i=0; i<itemNodes.length; i++) {
     var idNodes = itemNodes[i].getElementsByTagName("id");
     var nameNodes = itemNodes[i].getElementsByTagName("name");
     var sexNodes=itemNodes[i].getElementsByTagName("sex");
     var ageNodes=itemNodes[i].getElementsByTagName("age");
     if (idNodes.length > 0 && nameNodes.length > 0&&sexNodes.length > 0&& ageNodes.length > 0) {
      var id=idNodes[0].firstChild.nodeValue;
      var name = nameNodes[0].firstChild.nodeValue;
      var sex = sexNodes[0].firstChild.nodeValue;
      var age=ageNodes[0].firstChild.nodeValue;
      itemList.push(new Array(id,name, sex,age));
     }
    }
    
    var pageNodes = responseNode.getElementsByTagName("pagination");
    if (pageNodes.length>0) {
     var totalNodes = pageNodes[0].getElementsByTagName("total");
     var startNodes = pageNodes[0].getElementsByTagName("start");
     var endNodes=pageNodes[0].getElementsByTagName("end");
     var currentNodes=pageNodes[0].getElementsByTagName("pageno");
     if (totalNodes.length > 0 && startNodes.length > 0&&endNodes.length > 0) {
      var total=totalNodes[0].firstChild.nodeValue;
      var start = startNodes[0].firstChild.nodeValue;
      var end = endNodes[0].firstChild.nodeValue;
      var current=currentNodes[0].firstChild.nodeValue;
      pageList.push(new Array(total,start,end,current));
     }
    }
   }
   showTable(itemList,pageList);
  }

Le code ci-dessus est utilisé pour traiter les résultats au format XML renvoyés après une demande asynchrone du Servlet via Ajax. Le code du Servlet se trouve dans l'article précédent. Parmi eux, itemList et pageList sont respectivement la liste d'utilisateurs et la navigation par pagination générées après l'analyse et le retour, afin que les utilisateurs puissent afficher les données à leur manière. 

function pageselectCallback(page_index, jq){
  var pars="pageNo="+(page_index+1);
   $.ajax({
    type: "POST",
   url: " UserBasicSearchServlet",
   cache: false,
   data: pars,
   success: showResponse
  });
    return false;
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le contrôle Rating dans AjaxToolKit

Comment implémenter la traversée jQuery+ajax de json données

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JS gère les URLArticle suivant：JS gère les URL

Articles Liés

Voir plus