bootstrap-table填坑

任务：写一个搜索引擎，利用模糊搜索查询记录。

想法：搜索引擎的模糊搜索有两种，一种懒人方法利用sql语句基于like，一种利用分词（有空填上此坑）。

那我这里先用sql来懒人模糊查找，用springboot+mybatis框架，前端用bootstrap的table。

那其实重点就是如何利用bootstrap的table，第一次使用，必须在此立文。

附上最后查询出来的结果图

接下来说一下一些需要注意的地方

bootstrap table的官方文档

在html引入bootstrap以及bootstrap table

 <!-- 引入bootstrap核心css文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入bootstrap-table样式 -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

    <!-- jquery -->
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- bootstrap-table.min.js -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <!-- 引入中文语言包 -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

bootstrap中table的用法有两种，一种是在table里面写data-field，一种是在js里面写columns（这里我写在columns里）。

传入数据也有两种，一种是直接传进json（直接写好json调用），一种url（可能需要访问数据库），但都是以json格式返回。

定义好表格

<table id="exampleTableToobar3">
</table>

写js

$("#exampleTableToobar3").bootstrapTable({
                url: "/getSearch",
                method: 'post',
                cache: false,
                stripe: true,
                pagination: true,
                undefinedText: "空",
                data: [],
                dataField: 'rows',
                dataType: 'Json',
                search: !0,
                showRefresh: !0,
                sidePagination: 'server',
                queryParams: queryParams,
                pageSize: 10,
                pageList: [10, 25, 50, 100],
                showColumns: !0,
                toolbar: "#exampleToolbar",
                iconSize: "outline",
                icons: {refresh: "glyphicon-repeat", columns: "glyphicon-list"},
                uniqueId: "ID",
                cardView: false,
                showToggle: true,
//                field字段必须与服务器返回的字段对应才会显示数据
                columns: [{
                    field: 'entid',
                    title: 'ID'
                }, {
                    field: 'entname',
                    title: '公司名字'
                }, {
                    field: 'regno',
                    title: '公司注册号码'
                }, {
                    field: 'orgno',
                    title: '公司统一信用证号码'
                }, {
                    field: 'dom',
                    title: '公司地址'
                }, {
                    field: 'lerep',
                    title: '法定代表人'
                }, {
                    field: 'enttype',
                    title: '企业性质'
                },{
                    field:'domdistance',
                    title:'公司地址所在区域代码'
                },{
                    field:'regorg',
                    title:'注册单位'
                },{
                    field:'opscope',
                    title:'经营范围'
                },{
                    field:'regcap',
                    title:'注册资金'
                }],
                onLoadSuccess : function(data) {
                    console.log(data);
                }

            });



        function queryParams(params) {
//            这里的键的名字和控制器的变量名必须一致
            console.log(params);
            return {
                limit: params.limit,
                offset: params.offset,
                order: params.order,
                ordername: params.sort,
                search: params.search
            }
        };


</script>

这里注意的就是field字段要与数据库返回的列属性对应，这个对应是指在field里有的那数据库查找出来的列属性就必须要有，列属性数目可以比field字段多。

还有一个特别要注意的，就是坑了很久的一个，json只有小写，而数据库你可能大写了，数据库不区分大小写，返回的json却都是小写，这样就会导致最后表格上都为空，所以传回去的json一定要与field里面对应，它是通过field来与json对号入座的！

另外就是一个分页问题。

对于bootstrap，分页有分两种，一种客户端也就是前端自动给你分，它把所有数据一次性查完然后bootstrap给你分页；一种服务器分，这个通常选服务器，适合数据量大，后台分你前台要拿些就给你找哪些。

那对于后台分页，又有两种，一种基于sql的limit分，就是写sql语句时候加个条件，只查哪个范围内的数据（下次填）；一种用分页方法，mybatis有一个分页方法，那这边我先用mybatis的分页方法啦。

关于mybatis的分页

<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
			<version>4.1.4</version>
		</dependency>

插入maven后，写一个config类代替传统的xml文件，会方便很多。

@Configuration
public class MyBatisConfiguration {
    @Bean
    public PageHelper pageHelper(){
        PageHelper pageHelper = new PageHelper();
        Properties p = new Properties();
        p.setProperty("offsetAsPageNum","true");
        p.setProperty("rowBoundsWithCount","true");
        p.setProperty("reasonable","true");
        pageHelper.setProperties(p);
        return pageHelper;
    }
}

这样写完就可以用了，在control里用分页，加上这句话

 PageHelper.startPage(pageUtil.getOffset()/pageUtil.getLimit()+1,pageUtil.getLimit());

就可以自动分页，不用在sql写了，原理貌似就是查的时候全查了，但因为有这个stratPage方法，我显示的起始页结束页就是上面我定义的那些。前台会需要返回用户的offset和limit也就是起始页，查询数量。

自动分页搞定，table搞定，接下来查完用map封装起来传给前台。

json格式是一个人为定义的格式

其中一定要包括rows和total。rows就是list，查询返回的记录，total是记录总数。