本文介绍如何利用Bootstrap Table进行简单的查询和数据显示。通过引入必要的CSS和JS文件，结合jsp页面、JavaScript以及后台Controller的代码，实现了前端界面的查询功能并展示数据。
最近用bootstraptable写了一个查询显示的界面。
下面是主要代码：
1. 我引入的css和js
| <link rel="stylesheet" href="${basePath}/css/bootstrap.min.css" > <link rel="stylesheet" href="${basePath}/css/bootstrap-table.min.css"/> <link rel="stylesheet" href="${basePath}/css/query.css"> <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> <script type="text/javascript" src="${basePath}/js/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="${basePath}/js/bootstrap.min.js"></script> <script type="text/javascript" src="${basePath}/js/bootstrap-table.min.js"></script> <script type="text/javascript" src="${basePath}/js/bootstrap-table-locale-all.min.js"></script> <script type="text/javascript" src="${basePath}/js/query.js"></script>
|
2. jsp的页面代码：
| <body> <div class="panel panel-default">
<input type="hidden" id="basePath" name="basePath" value="<%=basePath %>"/> <div class="panel panel-success" id="main"> <input type="hidden" id="message" name="message" value="${message }"/> <!--主体 --> <div class="panel-heading">
<h3 class="panel-title">信息查询</h3> </div> <!-- 标头 --> <div class="panel-body"> <div class="title">
<div class="announce-info"> <form action="<%=basePath %>/table/page" method="post"> <table class="table table-bordered"> <tbody> <tr> <td class="heading">协议单位编码</td> <td> <div class="form-group"> <input type="text" class="form-control" id="PROTOCOL_CODE" name="PROTOCOL_CODE" value="${pb.PROTOCOL_CODE}"/> </div> </td> <t |
最低0.47元/天 解锁文章
扫一扫
464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
