bootstrap-table 使用方法

1、引入相关的css和js


 



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="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;
    }
})

 





你可能感兴趣的:(bootstrap-table 使用方法)