bootstrapTable使用简记

如果数据以表格的形式展示，则可以非常的方便的通过 bootstrapTable库进行展示和分页

1.bootstrapTable前端分页
适用于可以一次性将所有数据加载，然后前端进行分页展示

$('#qrTable').bootstrapTable({
            pagination: true,
            search: true,
            // showSearchButton: true,
            // showSearchClearButton: true,
            columns: [{
                field: 'dealer_name',
                title: '经销商名称'
            }, {
                field: 'dealer',
                title: '经销商代码'
            }, {
                field: 'wlbj',
                title: '五菱宝骏'
            },{
                field: 'xbj',
                title: '新宝骏'
            }],
            data: tableData
        })

2.bootstrapTable后端分页

$('#qrTable').bootstrapTable({
                   headers: headers,  
                   method : 'get',
                   url : "后端数据接口地址",//请求路径
                   striped : false, //是否显示行间隔色
                   pageNumber : 1, //初始化加载第一页
                   pagination : true,//是否分页
                   sidePagination : 'server',//server:服务器端分页|client：前端分页
                   pageSize : 20,//单页记录数
                   pageList : [20],//可选择单页记录数
                   // showRefresh : true,//刷新按钮
                   queryParams : function(params) {//上传服务器的参数
                       var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的
                           limit : params.limit, // 每页显示数量
                           offset : params.offset, // SQL语句起始索引
                           // headers: headers,
                           activity_area: $activity_area,
                           province: $province,
                           city: $city,
                           dealer: $dealer,
                           search: $('#searchInfo').val(),
                       };
                       return temp;
                   },
                   responseHandler: function(res) {
                       var rows = [];
                       for(var item of res.data){
                           var tmp = {'1': '','2':''};
                           for(var j of channel){
                               tmp[j] = '<span class="fa fa-2x fa-qrcode viewQrCode" data-dealer="'+item["dealercode"]+'" data-dealername="'+item['dealername']+'" data-activity_id="'+activity_id+'" data-type="'+j+'"></span><div></div>'
                           }
                           rows.push({
                               dealer_name: item['dealername'],
                               dealer: item['dealercode'],
                               wlbj: tmp['1'], //<img src="data:image/png;base64,'+ tmp['1'] +'" style="width:80px;" />
                               xbj: tmp['2'], //'<img src="data:image/png;base64,'+ tmp['2'] +'" style="width:80px;" />'
                           });
                       }
                       return {
                           total: res.pagination.totalCount,
                           rows: rows,
                       }
                   },
                   columns: [{
                       field: 'dealer_name',
                       title: '经销商名称'
                   }, {
                       field: 'dealer',
                       title: '经销商代码'
                   }, {
                       field: 'wlbj',
                       title: '五菱宝骏'
                   },{
                       field: 'xbj',
                       title: '新宝骏'
                   }],
               });

需要后台返回总条数信息，而且由于后台返回的数据格式可能与bootstrapTable需要的格式不同，因此需要在responseHandler方法中进行相应的数据转换。

总结

bootstrapTable很强大，很好用。