【第二篇】搞定BootstrapTable（后端使用SpringMVC+Hibernate）

kkorkk

已于 2023-10-31 20:43:07 修改

阅读量4.6k

点赞数

分类专栏：前端文章标签： BootstrapTable 分页显示

于 2017-09-08 22:46:10 首次发布

本文链接：https://blog.csdn.net/kkorkk/article/details/77899857

版权

还是那句老话，好记性不如烂笔头。上次已经将最基本的BootstrapTable的查询做出来了，现在将功能完善一下，添加包括删除用户、添加用户、修改用户信息、按条件查询用户的功能。好了，废话不多说，让我们开始吧！

先看jsp文件：

index.jsp:

<%@ page contentType="text/html;charset=UTF-8"%>
<html>

<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-table.css" type="text/css">
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>

<body>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title text-center">Bootstrap-table样例演示</h3>
		</div>
		<div class="panel-body">

			<div id="toolbar" class="btn-group">
				<button id="btn_save" 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 class="form-inline">
					<select class="form-control" id="selectForm"  style="margin-left: 20px;">
						<option value="id">ID</option>
						<option value="name">用户名</option>
						<option value="age">年龄</option>
						<option value="address">地址</option>
					</select>
					<input class="form-control" id="searchText" style="margin-top: -70px;margin-left: 250px;" type="text" placeholder="请输入搜索内容"></input>
					<button class="btn btn-info" id="searchBtn" style="margin-top: -70px;">搜索</button>					
				</div>
			</div>

			<table data-toggle="table" id="table" data-height="400"
				data-classes="table table-hover" data-striped="true"
				data-pagination="true" data-side-pagination="server"
				data-show-refresh="true" data-show-toggle="true"
				data-show-columns="true" data-toolbar="#toolbar">
				<thead>
					<tr>
						<th data-field="state" data-checkbox='ture'></th>
						<th></th>
						<th></th>
						<th></th>
						<th></th>
					</tr>
				</thead>
			</table>
		</div>
	</div>

	<!-- 编辑用户模态框（Modal） -->
	<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label>姓名</label> <input type="text" class="form-control"
								id="name">
						</div>

最低0.47元/天解锁文章

kkorkk

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
【第二篇】搞定BootstrapTable（后端使用SpringMVC+Hibernate）

还是那句老话，好记性不如烂笔头。上次已经将最基本的BootstrapTable的查询做出来了，现在将功能完善一下，添加包括删除用户、添加用户、修改用户信息、按条件查询用户的功能。好了，废话不多说，让我们开始吧！先看jsp文件：index.jsp: Bootstrap-table样例演示新增
复制链接

扫一扫