bootstrap-table表格如何实现分页，并可以模糊搜索

最新推荐文章于 2024-09-20 11:38:47 发布

熊抱抱的一粒

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量1.6k

点赞数

文章标签： javascript html jquery

本文链接：https://blog.csdn.net/qq_52959651/article/details/110203065

版权

本文介绍了如何在Bootstrap-Table中实现分页功能并添加模糊搜索。通过引入相关文件，设置HTML属性如"data-search"和"data-pagination"，以及配置"data-field"和"data-sortable"，可以创建带有搜索框和分页条的表格。数据来源通常是一个JSON文件，其中字段需与HTML中的data-field匹配。此外，文章还展示了使用JavaScript的closest()和remove()方法实现删除功能的示例。

摘要由CSDN通过智能技术生成

bootstrap-table表格如何实现分页，并可以模糊搜索
以下是实现效果
分页效果
查找操作在这里插入图片描述

引入文件

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

这是js代码

<script>
			$(function() {
   
			$.get("data.json",function (data) {
   
					$(".table").bootstrapTable({
   
						data:data
					})
					
				})

			})
		</script>

HTML页面
data-search = “true” 这个就是开启搜索框
data-pagination 设置为 true 会在表格底部显示分页条
data-field 该列映射的data的参数名(关键) 和json文件里的参数名一样，否则显示不出来
data-sortable 该列是否排序（表头显示双箭头）（关键）

<table class="table table-bordered "  data-search = "true" data-pagination="true">
					<thead>
						<tr class="">
							<th class="fize" data-field="ID" data-sortable = "true">ID</th>
							<th class="fize" data-field="name" data-sortable = "true">用户名</th>
							<th class="fize" data-field="email" data-sortable = "true">邮箱</th>
							<th class="fize" data-field="caozuo">操作</th>
						</tr>
					</thead>
					<tbody></tbody>
</table>

这是data.json页面

[
 {
	 "ID":1,
	 "name":"张三",
	 "email":"12345679@maiziedu.com",
	 "caozuo":"<div  class='btn-group'><button  type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>操作<span class='caret'></span></button><ul class='dropdown-menu'><li><a href='#'>编辑</a></li><li><a href='#' class='dele'>删除</a></li><li><a href='#'>锁定</a></li><li><a href='#'>修改密码</a></li></ul></div>"
 },
  {
	 "ID":2,
	 "name":"张三2",
	 "email":"12345679@maiziedu.com",
	 "caozuo":"<div  class='btn-group'><button  type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-haspopup<