datatables之tab切换(添加,删除)

来源：互联网发布：百万公众网络编辑：程序博客网时间：2024/06/10 08:04

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删除  })         })

遇到的问题：