table.bootstrapTable() :基本使用方法

在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-*属性标识设置，也可以使用Javascript方式进行设置，非常方便。

Bootstrap-Table显示数据到表格的方式有两种，一种是客户端模式，一种是服务器模式　　

1.  
   1.客户端模式：指的是在服务器中把要显示到表格的数据一次性加载出来，然后转换成JSON格式传到要显示的界面中，客户端模式较为简单，它是把数据一次性加载出来放到界面上，然后根据你设置的每页记录数，自动生成分页。当点击第二页时，会自动加载出数据，不会再向服务器发送请求。同时用户可以使用其自带的搜索功能，可以实现全数据搜索。对于数据量较少的时候，可以使用这个方法。
2.  
   2.服务器模式：指的是根据设定的每页记录数和当前要显示的页码，发送数据到服务器进行查询，然后再显示到表格中。该方法可以根据用户的需要动态的加载数据，节省了服务器的资源，但是不能使用其自带的全数据搜索功能。

Html表格table属性设置如下 

1.  
   data-toggle="table"
2.  
   data-url="Url地址"
3.  
   data-pagination="true"
4.  
   data-search="true"
5.  
   data-show-columns="true"
6.  
   data-show-refresh="true"
7.  
   data-show-toggle="true"
8.  
   data-page-number="1"
9.  
   data-page-size="15"
10.  
    data-sort-name="create_time"
11.  
    data-sort-order="desc"
12.  
    data-page-list="[10, 25, 50, 100, All]"
13.  
    data-click-to-select="true"
14.  
    data-single-select="true"
15.  
    data-toolbar="#toolbar"

具体使用方法如下：

1.  
   <table id="getUserScale"
2.  
   class="table table-bordered table-hover" width="100%"
3.  
   data-pagination="true" data-page-size="25" data-show-refresh="true">
4.  
   </table>

整个js参考配置如下：

1.  
   var $table;
2.  
   //初始化bootstrap-table的内容
3.  
   function initTableList() {
4.  
   //记录页面bootstrap-table全局变量$table，方便应用
5.  
   var queryUrl = 'Url网址'
6.  
   $table = $('#table').bootstrapTable({
7.  
   url: queryUrl, //请求后台的URL（*）
8.  
   method: 'GET', //请求方式（*）
9.  
   //toolbar: '#toolbar', //工具按钮用哪个容器
10.  
    striped: true, //是否显示行间隔色
11.  
    cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
12.  
    pagination: true, //是否显示分页（*）
13.  
    sortable: true, //是否启用排序
14.  
    sortOrder: "asc", //排序方式
15.  
    sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
16.  
    pageNumber: 1, //初始化加载第一页，默认第一页,并记录
17.  
    pageSize: rows, //每页的记录行数（*）
18.  
    pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
19.  
    search: false, //是否显示表格搜索
20.  
    strictSearch: true,
21.  
    showColumns: true, //是否显示所有的列（选择显示的列）
22.  
    showRefresh: true, //是否显示刷新按钮
23.  
    minimumCountColumns: 2, //最少允许的列数
24.  
    clickToSelect: true, //是否启用点击选中行
25.  
    //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
26.  
    uniqueId: "ID", //每一行的唯一标识，一般为主键列
27.  
    showToggle: true, //是否显示详细视图和列表视图的切换按钮
28.  
    cardView: false, //是否显示详细视图
29.  
    detailView: false, //是否显示父子表
30.  
    //得到查询的参数
31.  
    queryParams : function (params) {
32.  
    //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
33.  
    var temp = {
34.  
    rows: params.limit, //页面大小
35.  
    page: (params.offset / params.limit) 1, //页码
36.  
    sort: params.sort, //排序列名
37.  
    sortOrder: params.order //排位命令（desc，asc）
38.  
    };
39.  
    return temp;
40.  
    },
41.  
    columns: [.......],
42.  
    onLoadSuccess: function () {
43.  
    },
44.  
    onLoadError: function () {
45.  
    showTips("数据加载失败！");
46.  
    },
47.  
    onDblClickRow: function (row, $element) {
48.  
    //初始化时绑定onDblClickRow事件 双击行事件
49.  
    },
50.  
    });
51.  
    };

备注 ：如需要使用bootstrapTable 其余事件 可参考以下网址

bootstrap table 事件 - itxst.combootstrap table 事件顾名思义就是bootstrap table表格的各种操作事件，如点击行、双击行、加载数据成功、排序刷新等等各种事件。我们要使用bootstrap table这款表格插件而不了解它事件的用法是寸步难行的。为了大家更好的查阅bootstrap table的事件，我们特制作了本教程。https://www.itxst.com/bootstrap-table-events/tutorial.html

这篇好文章是转载于：学新通技术网