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删除
})
})
遇到的问题：
1.
解决方法：在参数设置中加入
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的点击事件才能触发父元素的点击事件
效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
