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.cnblogs.com/wdlhao/p/6694083.html

---

三、使用准备

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

1、css: 

bootstrap.min.css
bootstrap-table.min.css

2、js:

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

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

bootstrap.min.js

bootstrap-table.min.js

bootstrap-table-zh-CN.min.js

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

3、html页面：

页面结构非常简单：

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

/**
 * 全局变量
 */

    //表格字段和元素
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 = " 标为已读 ";
                    }else{
                    markHtml =  "   ----   ";
                    }
                var btnHtml = "查看详情" +
                    markHtml + "删除";
                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&¶ms.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,
     }
 };