BootstrapTable后台分页和自定义查询前台后台

bootstraptable是一款很好用的表格插件，自己浅浅的使用了一下，插件的属性事件就不再赘述，附上官网网址：

官网： http://bootstrap-table.wenzhixin.net.cn/

文档网址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

使用bootstrap记得引用bootstrap.js和jquery.js，官网有介绍。

下面是效果图：

下面是工程里使用的一段代码，主要是记录下服务端分页和自定义查询：

这是放表的地方，定义一个div里面放个table就行，别忘了加id：

< div class = "example" style =" padding-top : 20px ;" >

    < table id = "table_list" ></ table >

</ div >

这是表上面的自定义查询框，用了bootstrap的折叠层，隐藏过多的查询框：

<div class="container" style="padding-left: 0px;margin-left: 0px;">

    <button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#demo">查询项</button>

        <div id="demo" class="collapse">

            <div class="table-responsive">

                <form action="/admin/export" method="post">

                    <table class="table">

                        <tr>

                        <th><span>得分:</span><input type="text" name="score" id="score" placeholder="格式: 60-80 或: 60" οnchange="valiValue('score',$.trim($('#score').val()))"></th>

                        <th><span>日期:</span><input type="text" name="time_send" id="time_send" placeholder="格式: 20170101-20170201 或:20180427235959" οnchange="valiValue('time_send',$.trim($('#time_send').val()))"></th>

                        </tr>

                        <tr>

                        <th><span>姓名:</span><input type="text" name="name" id="name" placeholder="格式: 张xx" οnchange="valiValue('name',$.trim($('#name').val()))"></th>

                        <th><span>邮箱:</span><input type="text" name="email" id="email" placeholder="格式: xxxxxxxx@xx.com " οnchange="valiValue('email',$.trim($('#email').val()))"></th>

                        </tr>

                        <tr>

                        <th><span>状态:</span><input type="text" name="status" id="status" placeholder="格式: 未/已发送 或: 未/已" οnchange="valiValue('status',$.trim($('#status').val()))"></th>

                        <th><span>电话:</span><input type="text" name="phone" id="phone" placeholder="格式: xxxxxxxxxxx" οnchange="valiValue('phone',$.trim($('#phone').val()))"></th>

                        </tr>

                        <tr>

                        <th><input type="button" class="btn btn-success btn-xs" id="eventquery" value="开始查询"></th>                                            

                        <th><input type="submit" class="btn btn-success btn-xs" value="开始导出" /></th>                                                    

                        </tr>

                    </table>

                </form>

            </div>

        </div>

</div>

加载表的js代码：

$( "#table_list" ).bootstrapTable({

            method: "POST" ,

            contentType: "application/x-www-form-urlencoded" ,      //这句话是必须的，否则会出现问题，比如数据传不到后台等

            url: "${pageContext.request.contextPath}/admin/user/list" ,

            pagination: true ,

            pageSize: 10,

            pageNumber: 1,

            pageList: [5, 10, 15, 20, 25],

            sidePagination: 'server' ,                     //有client和server两种，server是后台分页，适用于表格数据很大时，client是前台分页，不用赘述

            queryParamsType : 'undefined' ,         //这个和queryParams我用来做自定义查询，当然bootstraptable自带的查询也很好用，如果有特殊的查询需求 就需要自定义。如果用到自带查询，添加search属性，设置为true

            queryParams : queryParams,

            columns: [{

                title: "Id" ,

                field: "uid" ,

                sortable: true

            },{

                title: "用户名" ,                    //表格的表头文字

                field: "name"                       //对应后台传来的json

            },{

                title: "邮箱" ,

                field: "email"

            },{

                title: "电话" ,

                field: "phone"

            },{

                title: "状态" ,

                field: "status" ,

                formatter: isSendEmail            //这一列对应的函数，发挥的空间很大

            },{