datatable.js之tab切換(新增,刪除)

風靈使發表於2018-10-22
JS

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的點選事件才能觸發父元素的點選事件

效果：

在這裡插入圖片描述

在這裡插入圖片描述

相關文章