新建一个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>