bootstrap-table.js ajoute une méthode pour implémenter la fonction de passage à la page xx

Cet article présente principalement la barre d'outils de pagination étendue bootstrap-table.js et ajoute la fonction de passage à la page xx. Étant donné que le niveau de l'éditeur est toujours au niveau dom, cette extension ne prend en charge que les tableaux sur la page. Les suggestions sont les bienvenues et j'espère qu'elles pourront aider tout le monde.

[Recommandations vidéo associées : Tutoriel Bootstrap]

Nouveau projet, je vais utiliser le contrôle bootstrap-table pour afficher la table sur la page, mais je n'ai pas le choix. La barre d'outils de pagination de ce contrôle n'a pas pour fonction de sauter à la page xx afin de s'adapter aux besoins gênants des artistes de l'entreprise (artistes qui ne peuvent produire que des images, mais qui me le demandent. ceci et cela), j'ai mordu la balle et j'ai changé la table d'amorçage. Le code source implémente cette fonction.

Remarque : étant donné que mon niveau js est toujours au niveau dom, cette extension ne prend en charge qu'une seule table sur la page, ce qui signifie que si la même page fait référence deux fois à bootstrap-table, le saut sera invalide.

Si des dieux de tous horizons ont une solution plus parfaite, veuillez laisser un message et faites-le-moi savoir afin que je puisse en tirer des leçons.

Je ne parlerai pas de la façon de référencer les contrôles. Baidu sur Internet l'a dit mieux que moi. Passons directement au code source.

1. Téléchargez le code source de bootstrap-table.js (attention à ne pas télécharger min. La version que j'ai téléchargée est : version : 1.11.0 Dans le code source, utilisez la classe '

  html.push(&#39;</p>&#39;,
         &#39;<p class="pull-&#39; + this.options.paginationHAlign + &#39; pagination">&#39;,
         &#39;<ul class="pagination&#39; + sprintf(&#39; pagination-%s&#39;, this.options.iconSize) + &#39;">&#39;,
         &#39;<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >&#39; + this.options.paginationPreText + &#39;</a></li>&#39;);

ok. Couvrez le code ci-dessus avec le code suivant.

  html.push(&#39;</p>&#39;,
        &#39;<p class="goPage"><input type="button" value="跳转" class="pageBtn" onclick="toPage();"></p>&#39;,
        &#39;<p class="goPage">跳转到第<input id="pageNum" class="pageNum" type="text">页</p>&#39;,
        &#39;<p class="pull-&#39; + this.options.paginationHAlign + &#39; pagination">&#39;,
        &#39;<ul class="pagination&#39; + sprintf(&#39; pagination-%s&#39;, this.options.iconSize) + &#39;">&#39;,
        &#39;<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >&#39; + this.options.paginationPreText + &#39;</a></li>&#39;);

À ce stade, le code source est modifié.

2. Ensuite, ajoutez la classe suivante dans le fichier CSS global

.pageBtn {
  
}
.pageNum {
  width: 40px;
  border-radius: 3px;
}
.goPage {
  float: right;
  margin-left: 5px;
  margin-top: 13px;
  height: 30px;
}

Si vous avez besoin de personnaliser le style du bouton, vous pouvez le définir vous-même dans pgeBtn

.

3. Dans le fichier js, ajoutez une méthode de saut

function toPage() {
  var pageNum = $("#pageNum").val();
  if (pageNum) {
    $('#table').bootstrapTable('selectPage', parseInt(pageNum));
  }
}

Notez que mon identifiant de table est défini comme table, vous devez remplacer $('#table').bootstrapTable par votre propre identifiant défini

ou supérieur, vous pouvez saisir le numéro de page pour sauter Transféré. Le rendu est le suivant :

Recommandations associées :

Partager. à propos de la méthode permettant à Ajax d'accéder à une nouvelle page jsp

Comment utiliser JS pour déterminer le nom de domaine actuel et accéder à la page spécifiée

Explication connexe du problème de chemin après le passage du servlet à la page JSP

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!