文章目录
Bootstrap插件的使用
table插件的使用可以解决表单查询、分页查询、批量删除、排序、搜索
提示:以下是本篇文章正文内容,下面案例可供参考
一、查询所有(例:)
二、批量删除(例:)
三、排序(例:)
四、搜索(例:)
五、分页(例:)
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
二、使用步骤
①查询所有
1.HTML5中的代码
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--3 引入jquery.js -->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<!--4 引入Bootstrap的css和js文件:注意bootstrap的js文件一定要在jquery.js之后-->
<link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap-table.css">
<script type="text/javascript" src="js/bootstrap-table.js"></script>
</head>
<body>
<table class="table table-striped" id="table" align="center"></table>
<script type="text/javascript">
$(function () {
$("#table").bootstrapTable({
url : "/Person/person/person_showAllPerson",
columns :[
{checkbox : true},
{title :"ID",field :"id"},
{title :"姓名",field :"name"},
{title :"年龄",field :"age"},
{title :"性别",field :"sex"},
{title : "手机号",field: "mobile",formatter:function (value) {
return value.charAt(0)+""+value.charAt(1)+""+value.charAt(2)+"****"+value.charAt(7)+""+value.charAt(8)+""+value.charAt(9)+""+value.charAt(10);
}},
{title :"出生日期",field :"birthday"}
]
})
});
</script>
</body>
</html>
2.action中的代码
代码如下(示例):
data = pd.read_csv(
public String showAllPerson() throws IOException {
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
PersonService ps = new PersonServiceImpl();
List<Person> person = ps.selectAllShow();
ObjectMapper mapper = new ObjectMapper();
String result = mapper.writeValueAsString(person);
out.print(result);
out.flush();
return null;
}
②批量删除
1.HTML5代码如下:
代码如下(示例):
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-table.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-table.css">
<script type="text/javascript">
$(function(){
$("#table").bootstrapTable({
columns:[
{checkbox:true},
{field:"userId",title:"编号"},
{field:"username",title:"姓名"},
{field:"password",title:"密码",formatter:function(value){console.log(value);
return "******";}}
],
url:"/bootstrap/users/showUsers",
toolbar:"<button class='btn btn-danger' οnclick='handleDelete()'>删除</button><button class='btn btn-primary'>添加</button>"
})
})
</script>
</head>
<body>
<table id="table" class="table table-striped"></table>
<script type="text/javascript">
function handleDelete(){
var selections = $("#table").bootstrapTable("getSelections");
console.log(selections);
$("#table").bootstrapTable("refresh");
}
</script>
</body>
2.action中代码如下:
代码如下(示例):