bootstrap-table 使用方法

1、引入相关的css和js

<link type="text/css" href="/components/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.css" rel="stylesheet" /> 
<script type="text/javascript" src="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/components/bootstrap/3.3.7/css/bootstrap.min.js"></script>
<script type="text/javascript" src="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="components/bootstrap-table/1.11.1/dist/bootstrap-table-zh-CN.js"></script>

2、第一种方法：

<table id="tablewrap1" data-toggle="table" data-locale="zh-CN"
                   data-ajax="ajaxRequest"  data-icon-size="sm"  data-single-select="false"
                   data-click-to-select="true" data-side-pagination="server"
                   data-striped="true" data-pagination="true"
                   data-maintain-selected="true"
                   class="fline-show-when-ready table" >
                <thead>
                <tr>
                    <!--<th data-field="state1" data-checkbox="true"></th>-->
                    <th data-field="field">名称</th>
                    <th data-field="fieldName">中文名称</th>
                    <th data-field="identifier">标识符</th>
                    <th data-field="affiliatedName">单位</th>
                    <th data-field="typeName">分类</th>
                    <th data-field="state1" data-checkbox="true"></th>
                </tr>
                </thead>
            </table>

说明： 

data-locale="zh-CN" 选择中文
data-ajax="ajaxRequest" 页面加载表格的数据
data-icon-size="sm" 图标的大小
data-side-pagination="server" 服务器分页方式 “server” 和 “client” 后台分页和前端分页
data-click-to-select="true"  是否点击选中
data-pagination=“true” 是否分页
详细的api参考　　https://bootstrap-table.com/docs/api/table-options/
3、js代码

function ajaxRequest(params) {
    var pageSize = params.data.limit;
    var pageNum = params.data.offset / pageSize + 1;
    index = params.data.offset + 1;
    var sort = params.data.sort ? params.data.sort : "id";
    var order = params.data.order ? params.data.order : "desc";
    var dataStr = 'pageNum=' + pageNum + '&pageSize=' + pageSize;
    var count;
    $.ajax({
        type : 'get',
        url :  'url',
        dataType : 'json',
        async : false,
        data : {
            'pageNum':pageNum,
            'pageSize':pageSize,
        },
        success : function(data) {
            var count = 0, dataElements = data.data;
            params.success({
                total : count,
                rows : dataElements
            });

        }
    });
}

4、第二种方法

$("#tablewrap").bootstrapTable({
    url: url,
    pagination: true,
    sidePagination: 'server',
    clickToSelect: true,
    pageNumber: 1,         
    pageList: "[10, 25, 50, 100, All]",
    columns: getTitle(param),
    queryParams: function (params) {  // url中传的参数
        var temp = {   
                rows: params.limit,   //页面大小
                start: params.offset,
                page: (params.offset / params.limit) + 1   //页码
                }
                return temp
    },
    responseHandler: function(res) { // 请求到的数据进行加工，格式必须是{rows: [], total: 0}
        var data = [];
        if (res ) {
            data = {
                rows: res.response.docs,
                total: res.response.numFound
            }
        }
        return data;
    }
})

 5、client分页和server分页的写法区别

// server 分页
 sidePagination: 'server',

 responseHandler: function (res) {
    var data = {
        rows: res.data,  // 要显示的数据的list
        total: res.data.count // 总条数
    };
    return data;
},
// client分页
sidePagination: 'client',

 responseHandler: function (res) {
    return  res.data;  // 要显示的数据的list, 没有总条数
},