Partagez une superbe table de plug-in-Bootstrap

Cet article résume et présente principalement l'utilisation de la table Bootstrap, la conversion de la pagination du serveur et de la pagination du client, ainsi que l'actualisation de la table. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Récent dans lequel je suis entré. contact avec un excellent plug-in, Bootstrap table. Je n'ai jamais fait d'affichage frontal, et mon impression de la table n'est que la balise table en html. Après avoir utilisé la table bootstrap, je dois dire que c'est vraiment génial.

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

Méthode de construction

1, HTML

<p class="btn-group hidden-xs"id="exampleTableEventsToolbar" >
 //定义一系列工具栏...
 </p>
<table data-toggle="table"
 data-url="${ctxAdmin}/user/userData?orgId=${orgId}" //table数据来源，json格式
 data-pagination="true" //是否支持分页
 data-show-search="true" //是否显示搜索框功能
 data-show-columns="true" //显示columns功能按钮
 data-icon-size="outline" 
 data-mobile-responsive="true"
 data-height="500" 
 id="tablelist"
 data-side-pagination="server" //支持服务器端分页，默认是client>
  <thead>
  <tr>
  <th data-field="user_id">ID</th>
  <th data-field="username" 
    data-formatter="usernameFormatter" //columns option 参见官网解释
    data-events="usernameEvents">用户名</th>
  <th data-field="real_name">真实姓名</th>
  <th data-field="tel_num">座机</th>
  <th data-field="mobile">手机</th>
  <th data-field="user_type">用户类型</th>
  <th data-field="operation" 
    data-formatter="actionFormatter"
    data-events="actionEvents">操作</th>
  </tr>
  </thead>
</table>

2, structure js :

 (function() {
  $('#tablelist').bootstrapTable({
   url: "${ctxAdmin}/user/userData?orgId=${orgId}",
   search: true, //是否显示搜索框功能
   pagination: true, //是否分页
   showRefresh: true, //是否显示刷新功能 
   showToggle: true,
   showColumns: true,
   iconSize: 'outline',
   // toolbar: '#exampleTableEventsToolbar', 可以在table上方显示的一条工具栏，
   icons: {
    refresh: 'glyphicon-repeat',
    toggle: 'glyphicon-list-alt',
    columns: 'glyphicon-list'
   }
  });

combinée avec le site officiel afficher les options du tableau, les options de colonne, les événements et les méthodes peuvent remplir de nombreuses fonctions. Le formateur de données et les événements de données ci-dessus sont les options des options de colonne.

formatateur de données et événements de données

Pour obtenir l'effet suivant, utilisez ce qui précède, utilisez simplement deux options ensemble, l'une pour définir le format et l'autre pour définir l'opération de clic.

Télécharger directement le code js

  //value: 所在collumn的当前显示值，
  //row:整个行的数据 ，对象化，可通过.获取
   //表格-操作 - 格式化 
  function actionFormatter(value, row, index) {
    return &#39;<a class="mod" >修改</a> &#39; + &#39;<a class="delete">删除</a>&#39;;
  }
  //表格 - 操作 - 事件
  window.actionEvents = {
    &#39;click .mod&#39;: function(e, value, row, index) {   
       //修改操作
      },
    &#39;click .delete&#39; : function(e, value, row, index) {
       //删除操作 
      }
    }

Conversion de pagination du serveur/pagination client, actualisation de la table

bootstrap par défaut C'est pagination côté client, qui peut être passée via la balise html

data-side-pagination : "client"

ou

sidePagination : 'server'

spécifié. Notez que les formats de données json transmis par ces deux arrière-plans sont également différents

client : Json normal array format [{},{},{}]
server : {"total":0,"rows":[]} où total représente le nombre de tous les éléments de données interrogés, et les lignes suivantes font référence à la quantité de données affichées sur la page actuelle.

Si vous devez modifier la méthode de pagination en fonction de la situation, vous devez utiliser

'refreshOptions' dans Méthodes //Définir les options lors de la mise à jour
'refresh' //Définir l'url lorsque mise à jour, requête (passer les paramètres en arrière-plan)

 $("#tablelist").bootstrapTable('refreshOptions', {
    sidePagination: 'client' //改为客户端分页
        });
 $("#tablelist").bootstrapTable('refresh', {
     url: "${ctxAdmin}/user/getsearchuserinfo", //重设数据来源
     query: {username: $('#sea-username').val(),realname: $("#sea-realname").val(),mobile: $("#sea-mobile").val()}//传到后台的参数
          });

[Recommandations associées]

1

Tutoriel vidéo en ligne js gratuit

2.

Manuel de référence JavaScript chinois

3.

php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

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!