datatable.js之tab切换(添加,删除)

最新推荐文章于 2025-10-28 17:57:56 发布

转载最新推荐文章于 2025-10-28 17:57:56 发布 · 1.6k 阅读

Jquery datatables.js 专栏收录该内容

23 篇文章

订阅专栏

datatables中tab切换，思路1：通过ajax获取所有的数据，在将不同数据分配到不同表格

其中tab切换采用的是bootstrap中的方法具体用法请参考官方文档，本文重点是ajax请求之添加删除

其他细节请忽略

1.必要的js,css文件

 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
   <script src="bower_components/jquery/dist/jquery.min.js"></script>
   <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
   <script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
   <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

2.HTML结构

<div style="width: 800px;margin: 0 auto">
	  <!-- Nav tabs -->
	<ul class="nav nav-tabs" role="tablist">
		<li role="presentation" class="active"><a href="#personInfo"  role="tab" data-toggle="tab">个人信息</a></li>
    <li role="presentation"><a href="#shopInfo"  role="tab" data-toggle="tab">店铺信息</a></li>
	</ul>
	 <!-- Tab panes -->
	  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="personInfo">
    	<table id="example1" class="table table-striped table-bordered" cellspacing="0" width="100%">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>邮件</th>
				<th>年龄</th>
				<th></th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td>
					<div class="input-group">
  						<span class="input-group-addon" >姓名</span>
  						<input type="text" class="form-control" id='pname'>
					</div>
				</td>
				<td>
					<div class="input-group">
  						<span class="input-group-addon" >性别</span>
  						<input type="text" class="form-control" id='psex' placeholder="(0)女,(1)男">
					</div>
				</td>
				<td>
					<div class="input-group">
  						<span class="input-group-addon" >邮件</span>
  						<input type="text" class="form-control" id='pemail'>
					</div>
				</td>
				<td>
					<div class="input-group">
  						<span class="input-group-addon" >年龄</span>
  						<input type="text" class="form-control" id='page'>
					</div>
				</td>
				<td>
					<button class="btn btn-success" id='padd'>添加</button>
				</td>
			</tr>
		</tfoot>
	</table>
    </div>
    <div role="tabpanel" class="tab-pane" id="shopInfo">
    	<table id="example2" class="table table-striped table-bordered" cellspacing="0" width="100%">
		<thead>
			<tr>
				<th>店铺名称</th>
				<th>店铺地址</th>
				<th>店铺号码</th>
				<th>店铺简介</th>
				<th></th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td>
					<div class="input-group">
  						<span class="input-group-addon" >店铺名称</span>
  						<input type="text" class="form-control" id='sname'>
					</div>
				</td>
				<td>
					<div class="input-group">
  						<span class="input-group-addon" >店铺地址</span>
  						<input type="text" class="form-control" id='saddress'>
					</div>
				</td>
				<td>
					<div class="input-group">
  						<span class="input-group-addon" >店铺号码</span>
  						<input type="text" class="form-control" id='snum'>
					</div>
				</td>
				<td>
					<div class="input-group">
  						<span class="input-group-addon" >店铺简介</span>
  						<input type="text" class="form-control" id='sinfo'>
					</div>
				</td>
				<td>
					<button class="btn btn-success" id='sadd'>添加</button>
				</td>
			</tr>
		</tfoot>
	</table>
    </div>
  </div>
</div>

3.json文件

{
"employees": [
{"name":"名字1","sex":"0","email":"123@163.com","age":"20"},
{"name":"名字2","sex":"1","email":"163@163.com","age":"50"},
{"name":"名字3","sex":"0","email":"132@163.com","age":"12"},
{"name":"名字4","sex":"0","email":"222@163.com","age":"55"}
],
"shops":[
{"sname":"小陈店铺","saddress":"地址1","snumber":"888888","sinfo":"简介啊啊"},
{"sname":"小卖部","saddress":"地址2","snumber":"666666","sinfo":"简介啊啊"},
{"sname":"杂货铺","saddress":"地址3","snumber":"22222","sinfo":"简介啊啊"}
]
}

4.js结构

$(function(){  
            let perdata, shopdata  
            let perArr=[];let shopArr=[]  
            $.ajax({  
                "url":'data.json',  
                "type":'get',  
                "dataType":'json',  
                "success":function(data){  
                    perdata=data.employees  
                    shopdata=data.shops  
                    showPer(perdata)   
                    showShop(shopdata)  
                }  
            })//先ajax获取所有的数据  
            function showPer(data){  
                $.each(data,function(index,item){  
                perArr.push([item.name,item.sex,item.email,item.age])//item为数组中的每一项  
            })  
                let options={  
             "paging":false,//不分页  
             "searching":false,//不搜索  
             "info":false,//不显示信息  
             "ordering":false,//不排序  
             "lengthChange":false,//不显示分页下拉列表  
             'destory':true,  
             "retrieve":true,  
             "data":perArr,  
             "columnDefs":[{"targets":[1],render:function(data,type,full){  
                return parseInt(data)===0?'女':'男'  
             }},{"targets":[4],render:function(data,type,full){  
                return "<button class='btn btn-danger del' >删除</button>"  
             }}]  
        }  
            let table1=$("#example1").DataTable(options)  
            return table1  
            }  
              
            function showShop(data)  
            {  
                $.each(data,function(index,item){  
                shopArr.push([item.sname,item.saddress,item.snumber,item.sinfo])//item为数组中的每一项  
            })  
                let options={  
             "paging":false,//不分页  
             "searching":false,//不搜索  
             "info":false,//不显示信息  
             "ordering":false,//不排序  
             "lengthChange":false,//不显示分页下拉列表  
             'destory':true,  
             "retrieve":true,  
             "data":shopArr,  
             "columnDefs":[{"targets":[4],render:function(data,type,full){  
                return "<button class='btn btn-danger del'>删除</button>"  
             }}]  
        }  
            let table2=$("#example2").DataTable(options)  
            return table2  
            }  
//动态添加员工信息  
$("#padd").click(function(){  
    let pname=$("#pname").val();  
    let psex=$("#psex").val();  
    let pemail=$("#pemail").val();  
    let page=$("#page").val()  
    showPer(perdata).row.add([pname,psex,pemail,page]).draw()  
})  
//动态添加店铺信息  
$("#sadd").click(function(){  
    let sname=$("#sname").val();  
    let saddress=$("#saddress").val();  
    let snum=$("#snum").val();  
    let sinfo=$("#sinfo").val()  
    showShop(shopdata).row.add([sname,saddress,snum,sinfo]).draw()  
})  
//删除信息 
$("#example1").on("click",".del",function(){  
    showPer(perdata).row($(this).parents('tr')).remove().draw()//找到当前点击按钮的那一行tr删除  
})  
$("#example2").on("click",".del",function(){  
   showShop(shopdata).row($(this).parents('tr')).remove().draw()//找到当前点击按钮的那一行tr删除  
}) 

})

遇到的问题：

在这里插入图片描述

解决方法：在参数设置中加入

destory:true,
retrieve:true

2.若点击方法写成如下则无效果

$(".del").click(function(){

 showPer(perdata).row($(this).parents('tr')).remove().draw()

 showShop(shopdata).row($(this).parents('tr')).remove().draw()

})

可能原因：点击按钮是通过datatables方法动态生成，浏览器自上而下解析代码，可能找不到类名为del的按钮

解决办法：给父元素加点击事件，通过事件冒泡，子元素的点击事件触发父元素的点击事件

结构：

$(父元素).on('click',function(){})
$(父元素).on('click',ele,function(){})//只有子元素为ele的点击事件才能触发父元素的点击事件

效果：

在这里插入图片描述