bootstrap-table 插件的使用

一、bootstrap-table插件的简介

Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。其主要的特点有：

• 支持 Bootstrap 3 和 Bootstrap 2
• 自适应界面
• 固定表头
• 非常丰富的配置参数
• 直接通过标签使用
• 显示/隐藏列
• 显示/隐藏表头
• 通过 AJAX 获取 JSON 格式的数据
• 支持排序
• 格式化表格
• 支持单选或者多选
• 强大的分页功能
• 支持卡片视图
• 支持多语言
• 支持插件

二、数据渲染到表格的方式

Bootstrap-Table显示数据到表格的方式有两种，一种是客户端（client）模式，一种是服务器（server）模式。
所谓客户端模式，指的是在服务器中把要显示到表格的数据一次性加载出来，然后转换成JSON格式传到要显示的界面中，在JavaWeb中可以保存在request中，然后转发到指定界面，在界面初始化的时候使用EL表达式获取，然后调用相关初始化的函数，将JSON字符串传进去即可显示。客户端模式较为简单，它是把数据一次性加载出来放到界面上，然后根据你设置的每页记录数，自动生成分页。当点击第二页时，会自动加载出数据，不会再向服务器发送请求。同时用户可以使用其自带的搜索功能，可以实现全局数据搜索。对于数据量较少的时候，可以使用这个方法。但是对于数据量大的系统，使用该方法会造成加载出一些很久之前的，用户不在关注的数据，使得加载速度变慢，增加了服务器的负担，浪费了资源。这时应该采用服务器模式。
所谓服务器模式，指的是根据设定的每页记录数和当前要显示的页码，发送数据到服务器进行查询，然后再显示到表格中。该方法可以根据用户的需要动态的加载数据，节省了服务器的资源，但是不能使用其自带的全数据搜索功能。因为你加载的数据只是一页的数据，所以全数据搜索的范围也只在一页之中。
客户端模式较为简单，读者可根据官方文档和例子自行实践。这里主要介绍服务器模式，并可以实现带参数的查询。 

注：以上内容摘自：https://www.geek-share.com/detail/2702959161.html

三、使用准备

由于bootstrap-table插件是基于bootstrap的，所以使用之前应具备bootstrap的环境。

1、css: 

[code]bootstrap.min.css
bootstrap-table.min.css

2、js:

[code]Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边

[code]jquery-2.2.3.min.js  //此版本可兼容引用的bootstrap-table插件，之前因为版本不对，导致插件引用无效。

[code]bootstrap.min.js

[code]bootstrap-table.min.js

[code]bootstrap-table-zh-CN.min.js

注：以上资源可到我的资源库下载。地址：

3、html页面：

页面结构非常简单：

[code]<div>
<table id="table0" class="col-xs-12 table-responsive"></table>

</div>

4、插件使用和参数封装：

[code]
/**
* 全局变量
*/

//表格字段和元素
var columnsObj = [
{
checkbox: true, // 显示一个勾选框
align: 'center' // 居中显示
},{
field: 'num',
title: '序号',
align: 'center',
}, {
field: 'monitorUserName',
title: '用户名',
align: 'center'
},
{
field: 'monitorUserUnitName',
title: '单位',
align: 'center'
}, {
field: 'monitorUserDeptName',
title: '部门',
align: 'center'
}, {
field: 'appName',
title: '报错运用',
align: 'center'
},{
field: 'exceptionName',
title: '报错类型',
align: 'center'
}, {
field: 'dateStr',
title: '时间',
align: 'center'
}, {
field: 'id',
title: '操作',
align: 'center',
formatter:function(value,row,index){
//通过formatter可以自定义列显示的内容
//value：当前field的值，即id
//row：当前行的数据
var markHtml = "";
if(row.isRead==0){
markHtml = "</span> <span messageId='"+value+"' onclick='markMessage(this);' >标为已读</span> ";
}else{
markHtml =  "</span> <span messageId='"+value+"' >&nbsp;&nbsp;----&nbsp;&nbsp;</span> ";
}
var btnHtml = "<span messageId='"+value+"' monitorUserName ='"+row.monitorUserName+"' exceptionName ='"+row.exceptionName+"'  dateStr ='"+row.dateStr+"' exceptionContent ='"+row.exceptionContent+"' onclick='showMessage(this);' data-toggle='modal' data-target='#myModal'>查看详情" +
markHtml + "<span messageId='"+value+"' onclick='deleteMessage(this);'>删除</span>";
return btnHtml;
}
}];

var pageSize = 10;
var pageNumber = 1;

//表格相关配置对象
var opt ={
url: "../getMessage/getDataList",//这个接口需要处理bootstrap table传递的固定参数
method: 'post',
contentType: "application/x-www-form-urlencoded",
//toolbar:toolbar,    //工具按钮用哪个容器
striped: true,      //是否显示行间隔色
cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,     //是否显示分页（*）
/* sortable: false,      //是否启用排序
sortOrder: "desc",     //排序方式
sortName:"dateStr",*/
/* queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber*/
//queryParams: queryParams,//前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数
queryParams:queryParams,
//queryParams : params,
sidePagination: "server",   //分页方式：client客户端分页，server服务端分页（*）
pageNumber:pageNumber,      //初始化加载第一页，默认第一页
pageSize: pageSize,      //每页的记录行数（*）
pageList: [5,10,15],  //可供选择的每页的行数（*）
//search: true,      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true,     //是否显示所有的列
showRefresh: true,     //是否显示刷新按钮
minimumCountColumns: 2,    //最少允许的列数
clickToSelect: false,    //是否启用点击选中行
searchOnEnterKey: true,
uniqueId: "id",                     //每一行的唯一标识，一般为主键列
showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
cardView: false,                    //是否显示详细视图
columns:columnsObj,
pagination:true,
onLoadSuccess: function(data){
//加载成功后的函数
if($("#navDiv .nav-tabs .active").attr("id")==0){
$("#addNews").text(data.total);
}
}
}

var table = $("#table0");

var paramObj = {};
paramObj.rows = "10",//页面大小,表格行数
paramObj.page = "1",   //页码
paramObj.sortField = "UPLOAD_TIME",      //排序列名
paramObj.sortOrder = "desc" //升序或降序（desc，asc）
paramObj.operationUserId = "05060001aa91ee11e7b7cf68f7283921";//运维人员ID
paramObj.getType = "0";//查询类型，页面的三个类型，最新0、重点1、全部2
paramObj.startTime = "";//开始时间
paramObj.endTime = "";//结束时间
paramObj.searchType = "0";//检索类型，用户名0，异常类型1，用户所在单位2
paramObj.searchText = "";//检索内容
paramObj.isTypeDel = "2";

$(function() {

initTable();

});

//初始化页面表格的方法
function initTable(){
$(table).bootstrapTable('destroy');
opt.pageSize = pageSize;
opt.pageNumber = pageNumber;
$(table).bootstrapTable(opt);
};

//参数封装
function queryParams(params){
if(params.limit!=undefined&&params.limit!=0){
pageSize = params.limit;
if(params.offset!=undefined){
pageNumber = params.offset/pageSize +1;
}
}
return{
limit:params.limit,
offset:params.offset,
sortField:paramObj.sortField,
sortOrder:paramObj.sortOrder,
operationUserId: getOperationUserId,
getType:paramObj.getType,
startTime:paramObj.startTime,
endTime:paramObj.endTime,
searchType:paramObj.searchType,
searchText :paramObj.searchText,
isTypeDel:paramObj.isTypeDel,
}
};