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

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

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

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

Html表格table属性设置如下

data-toggle="table"
data-url="Url地址"
data-pagination="true"
data-search="true"
data-show-columns="true"
data-show-refresh="true"
data-show-toggle="true"
data-page-number="1"
data-page-size="15"
data-sort-name="create_time"
data-sort-order="desc"
data-page-list="[10, 25, 50, 100, All]"
data-click-to-select="true"
data-single-select="true"
data-toolbar="#toolbar"

具体使用方法如下：

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

整个js参考配置如下：

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

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

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

table.bootstrapTable() 之基本使用方法相关推荐

bootstrap-table 合并单元格方法
bootstrap-table 单元格合并方法前面的话定义表格合并方法数据前面的话最近做一个表格需要根据前边列的字段合并之后列的相同字段单元格,网上找到的都是ji基于单个列字段重复次数的合 ...
MySQL 出现 The table is full 的解决方法
MySQL 出现 The table is full 只有一个原因,对应的表数据容量达到系统上限.具体限制请查看官方手册:http://dev.mysql.com/doc/refman/5.1/zh/ ...
html表格中绑定显示xml文档内容的简单实例,JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)...
本文实例讲述了JS读取XML文件数据并以table形式显示数据的方法.分享给大家供大家参考,具体如下: 先看xml文件: 张秋丽女 18 李文才男 31 李斯文男 22 马英女 25 孙红雷 ...
isfull mysql_MySQL数据库之MySQL 出现 The table is full 的解决方法
本文主要向大家介绍了MySQL数据库之MySQL 出现 The table is full 的解决方法 ,通过具体的内容向大家展现,希望对大家学习MySQL数据库有所帮助. 当我们要写入新数据而发生& ...
记一次MySQL中Waiting for table metadata lock的解决方法
记一次MySQL中Waiting for table metadata lock的解决方法参考文章: (1)记一次MySQL中Waiting for table metadata lock的解决方法 ...
利用html制作隔行变色表格,javascript实现table表格隔行变色的方法
本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: table间隔色 function SetTableColor() { var tbl = ...
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
http://www.jb51.net/article/44476.htm 本篇文章主要介绍了javascript操作table(insertRow,deleteRow,insertCell,dele ...
小技巧--table表格td内容垂直居中方法
小技巧–table表格td内容垂直居中方法前端页面编写时,table表格排版时最容易遇到的,就是单元格内的内容无法居中,又不能写行高时,可以使用以下方法: table td {vertical-al ...
mysql 5.7 drop table_MySQL5.7下面，误操作导致的drop table db1.tb1; 的恢复方法：
MySQL5.7下面,误操作导致的drop table db1.tb1; 的恢复方法: 0.停业务数据写入.[iptables封禁] 1.从备份服务器上拉取最新的一个全备文件,恢复到一个临时的服务器上 ...

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

table.bootstrapTable() 之基本使用方法相关推荐

最新文章

热门文章