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

骑猪看日落 2021-06-26 16:06 300阅读 0赞

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

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

其他细节请忽略

## 1.必要的js,css文件 ##

## 2.HTML结构 ##

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

遇到的问题：

![在这里插入图片描述][20181022231231208]

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

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的点击事件才能触发父元素的点击事件

## 效果： ##

![在这里插入图片描述][20181022232525270]

![在这里插入图片描述][20181022232728519]

[20181022231231208]: /images/20210626/c05eb9b0d4984a67892592f013ac783d.png
[20181022232525270]: /images/20210626/7741a97b83ef4188a68051a3c25be4d2.png
[20181022232728519]: /images/20210626/9f3dc3249ae94baf9a8ab11ce9b3600f.png