À propos de l'utilisation de bootstrap-table.js pour implémenter la fonctionnalité étendue de la barre d'outils de pagination

Cet article présente principalement la barre d'outils de pagination de l'extension bootstrap-table.js et ajoute la fonction de passage à la page xx Puisque mon niveau est bloqué au niveau dom, cette extension ne prend en charge que les tableaux sur la page. Les suggestions sont les bienvenues pour proposer

de nouveaux projets. Je prévois d'utiliser le contrôle bootstrap-table pour afficher le tableau sur la page Malheureusement, la barre d'outils de pagination de ce contrôle n'a pas pour fonction de passer à la page xx. . Afin de s'adapter à l'art de l'entreprise (uniquement Un artiste qui sait produire des images, mais qui m'a demandé ceci et cela, a mordu la balle et a modifié le code source de bootstrap-table pour implémenter 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 '

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

  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;);

Si vous devez personnaliser le style du bouton, vous pouvez définissez-le vous-même dans pgeBtn

  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;);

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

Notez que mon identifiant de table est défini comme table, vous devez remplacer

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

par le vôtre. ID défini
ou supérieur, vous pouvez entrer le numéro de page pour sauter Transféré Les rendus sont les suivants :

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

$('#table').bootstrapTableCe qui précède est ce que j'ai compilé pour vous. . J'espère que cela vous sera utile à l'avenir

Articles connexes :

Comment obtenir les N principales valeurs de couleur d'une image en javascript

Comment créer une carte logistique dans D3.js (tutoriel détaillé)

À propos de l'utilisation du modèle ejsExcel

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!