dataTable 根據不同行數據動態顯示行操作

dataTable是bootstrap中很好用的一個表格插件，本文是使用bootstrap中dataTable插件對錶格進行行操作。

最終頁面效果如下：

1.首先引入bootstrap中的dataTable插件

可參考內容：如何使用dataTable插件

2.現對頁面進行修改以滿足我想要的頁面效果。html 頁面

	<div class="row">
		<div class="col-xs-12">
			<table id="dynamic-table" class="table table-striped table-bordered table-hover">
				<thead>
				</thead>

				<tbody>
				</tbody>
			</table>
		</div><!-- /.span -->
	</div>			

3.腳本主要部分代碼

$(document).ready(function(){
	//dataTable的屬性設置
	$("#dynamic-table").dataTable({
		"destroy":true,//消除重定義出錯
		"bPaginate":false,//是否使用分頁
		"bFilter": false, //是否使用搜索
		"sInfo":true,
		"bAutoWidth":false,
		"oLanguage":{
			"sInfo":"顯示 _START_ 至 _END_ 條    本頁共 _TOTAL_ 條",
			"sZeroRecords":"沒有數據",
		},
		"aoColumns":[
			{"data":"recordId","sTitle":"進貨記錄id"},
			{"data":"shopId","sTitle":"商店名稱"},
			{"data":"createTime","sTitle":"創建時間"},
			{"data":"confirmTime","sTitle":"確認時間"},
			{"data":"goodId","sTitle":"商品名稱"},
			{"data":"recordNumber","sTitle":"進貨數量"},
			{"data":"recordStatus","sTitle":"進貨狀態"},
			{"data":" ","sTitle":"操作","bSortable":false,
				"mRender":function(data,type,full){
					var data = full;//全部行數據，可獲取隱藏行數據
					var recordStatus = data.recordStatus;
					if(recordStatus == "審覈通過"){
						return "<div class='hidden-sm hidden-xs action-buttons'><a data-toggle='modal' class='green' id='Yes' title='審覈通過'><span class='glyphicon glyphicon-ok'></span></a></div>";
					}else if(recordStatus == "審覈不通過"){
						return "<div class='hidden-sm hidden-xs action-buttons'><a  data-toggle='modal' class='red' id='No' title='審覈不通過'><span class='glyphicon glyphicon-remove'></span></a></div>";
					}else if(recordStatus == "待審覈"){
						return "<div class='hidden-sm hidden-xs action-buttons'><a href='#modal-table-edit' data-toggle='modal' class='blue' id='edit' title='待審覈'><span class='glyphicon glyphicon-flag'></span></a></div>";
					}
				}}
		],
		//"aaData":list,
		"aaData":[
					{"recordId":"0","shopId":"樂美","createTime":"2016.07.26","confirmTime":"","goodId":"咖啡","recordNumber":"0","recordStatus":"審覈通過"},
					{"recordId":"1","shopId":"嘉年華","createTime":"2016.07.26","confirmTime":"","goodId":"果汁","recordNumber":"0","recordStatus":"審覈不通過"},
					{"recordId":"2","shopId":"美麗世界","createTime":"2016.07.26","confirmTime":"","goodId":"水果","recordNumber":"0","recordStatus":"待審覈"},
				],
	});
	
	//標記點擊了哪個按鈕
	$("#dynamic-table tbody tr #detail").on("click",function(){
		f = 1;
	});

	$("#dynamic-table tbody tr #edit").on("click",function(d){
		f = 2;
	});

	$("#dynamic-table tbody tr #Yes").on("click",function(d){
		f = 3;
	});

	$("#dynamic-table tbody tr #No").on("click",function(d){
		f = 3;
	});
	
	//設置行點擊事件
	$("#dynamic-table tbody tr").on("click",function(){
		var td = $("td",this);
		var recordId = $(td[0]).text();
		//var stockStatus = $(td[6]).text();//獲得第五列數據
		if(f == 1){//詳情
			debugger;
		}else if(f == 2){//修改進貨狀態
			$("#recordId").val(recordId);//修改時彈出模態框
		}else if(f == 3){
			alert("該進貨狀態已經審覈過，不能修改！");
		}
	});

});

mReader:function(data,type,full)其中的full就是這一列的所有信息，試驗了一下，的卻訪問隱藏的那一列，那麼通過這種變相的方法就可以訪問隱藏的數據了。

學習記錄，多多更正修改，原創內容，轉載請註明出處。