前端框架bootstrap-table

新建一个ftl模板， 任何样式插件都是绑定在某个元素上面的，
 绑定标签:第一步 有一个标签 table
<table id="dataTable"></table>

第二步，初始化一个表格
通过javascript来初始化
使用jquery选择器定位dataTable调用bootstrapTable方法来初始化表格
$('#dataTable').bootstrapTable({})

<#assign base=request.getContextPath()/>
<#--jquery-->
<script src="${base}/lib/jquery/jquery-3.1.1.min.js"></script>
<#--bootstrap-->
<link href="${base}/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="${base}/lib/bootstrap/js/bootstrap.min.js"></script>
<#--bootstrap-table-->
<link href="${base}/lib/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet">
<script src="${base}/lib/bootstrap-table/js/bootstrap-table.min.js"></script>

<div id="content" style="margin-left: 70px;">
    <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default" >
            <div class="panel-heading">查询条件</div>
            <div class="panel-body" style="padding:2px">
                <form id="formSearch" class="form-horizontal">
                    <div class="" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="interfaceType">接口类型</label>
                        <div class="col-sm-3">
                            <select id="interfaceType" class="form-control">
                                <option value="http">http</option>
                                <option value="webService">webService</option>
                                <option value="restful">restful</option>
                                <option value="dubbo">dubbo</option>
                            </select>
                        </div>
                        <div class="" style="margin-top:15px">
                            <label class="control-label col-sm-1" for="interfaceAliasName">接口别名</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="interfaceAliasName">
                            </div>
                            <div class="col-sm-4" style="text-align:left;">
                                <button type="button" style="margin-left:50px" id="btn_query" class="btn  btn-success btnFont">
                                    查询
                                </button>
                            </div>
                        </div>
                </form>
            </div>
        </div>
        <div id="toolbar">
            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
        <table id="dataTable"></table>
    </div>
</div>

<table id="dataTable" ></table>
<script type="text/javascript">

 function param(params) {
        var obj = {
            pageSize: params.limit,
            pageNum: (params.offset/params.limit) + 1
        };
        return obj;
    }

 $(function () {
        var interfaceUrl = "/interfaceTest/selectForPage";
        $("#dataTable").bootstrapTable({
            url: interfaceUrl,
            method: "get",
            pageNumber: 0,
            pageSize: 10,
            pageList: [5, 10, 20, 50, 100],
            pagination: true,
            sidePagination: "server",
            queryParams: param,
            cache: false,
            height:500,
            toolbar:"#toolbar",
            paginationPreText: "上一页",
            paginationNextText:"下一页",
            striped: true,
            sortable: true,
            sortOrder: "asc",
            showRefresh: true,
            clickToSelect: true,
            columns: [
                {checkbox: true},
                {"field": "interfaceName","title": "接口名称"},
                {"field": "interfaceMethod","title": "接口方法"}]
        })
    })
</script>