bootstrap-table简单的使用介绍以及前后端的参数传递

拼搏现实的明天。 2023-03-04 05:26 18阅读 0赞

### 1、中文官网 ###

[BootStrap-Table中文官网][BootStrap-Table]

### 2、简单使用 ###

<div class="container">
        <div class="row">
            <div class="col-md-8">
            	
                <table id="table"></table>
            </div>
        </div>
    </div>
    
    <script> $('#table').bootstrapTable({ //bootstrapTable('refresh');表变更后自动更新 method:"post", url: '/getAllArticleJson', contentType : "application/x-www-form-urlencoded", //请求格式 dataType:"json", //返回数据的格式 cache:false, striped:true, //是否设置间隔色 pagination: true, //是否显示分页栏（底部） pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 5, //每页的记录行数（*） pageList: [1, 2, 3, 4, 5, 6, 10, 20], //可供选择的每页的行数（*） smartDisplay:false, sidePagination: "server", //在服务端，还是客户端完成分页，server--client paginationPreText: "上一页", //指定上一页图标的文字 paginationNextText: "下一页", //指定下一页图标的文字 search: true, //显示搜索框 // customSearch //自定义要搜的索列 strictSearch: true, //见名知意，不进行模糊匹配 showPaginationSwitch: true, //是否显示关闭导航功能 showColumns: true, //下拉图标，显示列 showColumnsSearch:true, //下拉图标，中含有搜索框 showColumnsToggleAll: true, //下拉图标，可以取消显示的所有列 showRefresh: true, //显示刷新图标 showToggle:true, //是否显示详细视图和列表视图的切换按钮 cardVisible: true, //显示详细信息 cardView: false, //是否显示详细视图，如果开启这个就需要开启上面那个，显示才更好 clickToSelect: true, //是否启用单击选中行 detailView: true, //是否显示父子表 //height:500, //行高，表格自动根据记录条数觉得表格高度 minimumCountColumns: 2, //最少允许的列数 buttonsClass:"danger", //右侧button的样式 checkboxHeader: false, //设置行头全部选中checkbox是否开启 classes:"table table-bordered table-hover", //设置表格的样式 dataFilter:true, sortable:true, sortOrder: "asc", columns: [{ checkbox: true, //在所有列之前显示一个checkbox showToolbar:true, }, { field: 'id', title: 'ID' }, { field: 'title', title: '标题' }, { field: 'body', title: '内容', sortable: true, }] }); //请求服务数据时所传查询参数 function queryParams(params){ return{ pageSize: params.pageSize, pageNum: params.pageNumber /*name:$('#searchName').val()*/ } } </script>

注意点：这里使用的是bootstrap4，众所周知，bs4的css文件里已不再提供`icon`。所以这里导入的是一个插件来完成图标的加载。添加如下内容。

### 3、我们来重点说一下前后端的参数传递 ###

我们知道bootstrap-table这个插件的分页是分为前后端两种分页方式的，

*  client
 *  server

设置的参数如下：

sidePagination: "server",               //在服务端，还是客户端完成分页，server--client

客户端分页：是指把后台的数据拉到前端，只对被拉取到的数据进行分页，我们这里不做介绍。  
服务端分页：根据前端传递的数据，在后端查询出数据并完成分页在交给前端。

上面那一大段的JS并没有配置参数传递的信息，但是当我们发起请求之后，在我们的请求头里还是有一些信息的，通过Chrome的抓包工具能看出来。  
![在这里插入图片描述][20200801140503401.png]  
在后台只需要使用对应的名称来接受即可。

public Map getArticle(
        @RequestParam(value = "limit") Integer pageSize,
        @RequestParam(value = "offset") Integer offset)

问题来了？这四个参数，是怎么来的，通过那个配置参数生效的呢？

queryParamsType:'limit',  //通过这个参数，后面必须指定为limit

那如果我想自定义传的参数怎么办呢？

queryParamsType:'',         //把后面的limit替换成空串，这个是必须的，否则下面这个参数不起作用
    queryParams:queryParams,    //把自定义的函数传过来
    
    //请求服务数据时所传查询参数
    function queryParams(params){
        return{
            pageSize: params.pageSize,
            pageNum: params.pageNumber
            /*name:$('#searchName').val()*/
        }
    }

### 4、整合pagehelper和elasticsearch为例分别分析 ###

###### 前端代码，我们把这两行注释掉，使用默认参数。 ######

/*queryParamsType:'',
    queryParams:queryParams,*/

###### elasticsearch后端完整代码 ######

@PostMapping("/getAllArticleJson")
    @ResponseBody
    public Map getArticle(@RequestParam(value = "limit") Integer pageSize,@RequestParam(value = "offset") Integer offset){ 
        int start = offset/pageSize;   //因为es根据pageSize已经确定了页数，start相当于取es帮我们分好的页数，
        PageRequest pageable = PageRequest.of(start, pageSize);
        Page<Article> all = articleDao.findAll(pageable);
        long total = all.getTotalElements();   //获取总记录数，这个很重要
        List<Article> articles = new ArrayList<>();
        all.forEach(articles::add);  //必须把Page类型的数据转成list类型，否则前端无法遍历填充
        Map map = new HashMap();
        //你可能会疑惑，map的value值类型不一样这能行吗，但事实就是没问题，我也在查为什么会这样？
        map.put("total", total);   //下面这两行是固定写法，参数必须叫 total 和 rows
        map.put("rows", articles);
        return map;
    }

从上面来看，我们如果使用es的话，在前端还是使用自定义的`queryParams`比较合适，但是有一点需要注意，es的分页下标是从0开始的，所以要使用pageNumber-1

PageRequest page = PageRequest.of(pageNumber-1, pageSize);

pagehelper的话

PageHelper.startPage(pageNumber,pageSize);

--------------------

## 总结 ##

bootstrap-table传递参数的两种方式

**第一种，默认配置**

/*queryParamsType:'',
    queryParams:queryParams,*/  这两个参数都不配
    
    queryParamsType:'limit'  //配置为limit
    
    //这两种方式完全一样

**第二种，自定义配置（推荐）**

queryParamsType:'',        //配置为空，必须
    queryParams:queryParams    //自定义函数
    
    
    //请求服务数据时所传查询参数
    function queryParams(params){
        return{
            pageSize: params.pageSize,
            pageNum: params.pageNumber
            /*name:$('#searchName').val()*/
        }
    }

**如果碰到 pageList参数失效**

smartDisplay:false,   // 配置这个惨呼

[BootStrap-Table]: https://www.bootstrap-table.com.cn/examples/welcome/index/
[20200801140503401.png]: /images/20230208/5fbaf9a5b9924f3fad9b46b5d7eae88e.png