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

本文介绍了如何在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<
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值