Share a great plug-in-Bootstrap table

This article mainly summarizes and introduces the use of Bootstrap table, server paging, client paging conversion, table refresh, which has certain reference value. Interested friends can refer to it

Recent I came into contact with a great plug-in, Bootstrap table. I have never done front-end display, and my impression of the table is only the table tag in html. After using bootstrap table, I have to say that it is really awesome.

【Related video recommendation: Bootstrap tutorial】

Construction method

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, js structure:

 (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'
   }
  });

Combined with the Table options displayed on the official website, Column options, Events, and Methods can accomplish many functions. The data-formatter and data-events above are the options in Column options.

data-formatter and data-events

To achieve the following effect, use the above Just use two options together, one to define the format and the other to define the click operation.

Directly upload js code

  //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) {
       //删除操作 
      }
    }

Server paging/client paging conversion, table refresh

bootstrap defaults to client Side pagination can be done through the html tag

data-side-pagination:"client"

or

in js

sidePagination: 'server'

specified. Note that the json data formats passed by these two backgrounds are also different
client: Normal json arrayFormat [{},{},{}]
server: {"total":0,"rows":[]} where total represents the number of all queried data items, and the following rows refers to the amount of data displayed on the current page.

If you need to change the paging method according to the situation, you must use
'refreshOptions' in Methods //Set the options when updating
'refresh' //Set the url when updating, query( Pass parameters to the background)

 $("#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()}//传到后台的参数
          });

[Related recommendations]

1. Free js online video tutorial

2. JavaScript Chinese Reference Manual

3. php.cn Dugu Jiujian (3) - JavaScript video tutorial

The above is the detailed content of Share a great plug-in-Bootstrap table. For more information, please follow other related articles on the PHP Chinese website!