datatalbe中有些數據是不想顯示出來的,如果設置bVisible:false能夠實現隱藏列,但是這種方法不能獲得隱藏列的數據,網上的方法是用mRender函數在裏面獲取,方法如下:
$('#tableTest').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaData": [
['101', 'aaa', '91,1', '2012-10-10', 'X'],
['102', 'bbb', '92,5', '2012-3-19', 'X'],
['103', 'ccc', '89,5', '2013-3-21', 'X'],
['105', 'eee', '95', '2011-11-11', 'C'],
['104', 'ddd', '91', '2013-2-22', 'X']
],
'aaSorting':[ [1,'asc'],[2,'asc'] ],
'aoColumns':[
{'sTitle':'ID', 'sWidth':'20%','sClass':'center'},
{'sTitle':'Name', 'sWidth':'20%','sClass':'center'},
{'sTitle':'Score','sWidth':'20%','sClass':'center'},
{'sTitle':'Date', 'sWidth':'20%','sClass':'center'},
{'sTitle':'downLoad', 'sWidth':'20%',"bVisible": false,"bSearchable": false, 'sClass':'center',
"mRender": function ( data, type, full ) {
return '<input type="text" class="userName" value="'+data+'"/>';
}}
]
});
$('#tableTest').find('.userName').each(function(){
console.log($(this).val());
});
這種方法可以獲取到列的所有數據,但是當我想要獲取到某列某行的數據就有點麻煩了,這裏提供簡單的方法獲取某列某行的隱藏列數據,如下;
需要在head標籤中寫入style樣式
.hidden{
display:none;
}
在html頁面中聲明datatable
<div id="dynamic-table"></div>
在script腳本中重定義datatable
$("#dynamic-table").dataTable({ "destroy":true,//消除重定義出錯 "bPaginate":false,//是否使用分頁 "bFilter": false, //是否使用搜索 "sInfo":true, "bAutoWidth":false, "serverSide": false, //"pageList":[20], //"pageSize":20, "oLanguage":{ "sInfo": "顯示 _START_ 至 _END_ 條 共 _TOTAL_ 條", "oPaginate": { "sPrevious": " 上一頁 ", "sNext": " 下一頁 ", } }, "aoColumns":[ {"data":"d","sTitle":"1","sClass":"hidden"}, {"data":"goodid","sTitle":"姓名"}, {"data":"goodname","sTitle":"聯繫方式"}, {"data":"goodprice","sTitle":"服務等級"}, {"data":"qrcode","sTitle":"狀態"}, {"data":"totalprice","sTitle":"工作類型"}, {"data":" ","sTitle":"操作","bSortable":false, "mRender":function(data,type,full){ return "<div class='hidden-sm hidden-xs action-buttons'><a id='detail' class='blue' title='查看詳情'><i style='cursor:pointer' class='ace-icon fa fa-info-circle bigger-120 blue'></i></a><a id='delete' class='red' title='刪除'><i style='cursor:pointer' class='ace-icon glyphicon glyphicon-trash bigger-110 red'></i></a><a id='leave' class='green' title='請假'><i style='cursor:pointer' class='ace-icon fa fa-envelope-o bigger-120 green'></i></a><a id='labourHour' class='blue' title='查看工時'><i style='cursor:pointer' class='ace-icon fa fa-calculator bigger-120 orange'></i></a></div>"; }} ], "aaData":[ {'d':'1',"goodid":"楊須彬","goodname":"13228898364","goodprice":"1級","qrcode":"培訓成功","totalprice":"鐘點工"}, {'d':'2',"goodid":"楊須彬","goodname":"13228898364","goodprice":"1級","qrcode":"培訓成功","totalprice":"鐘點工"}, {'d':'3',"goodid":"楊須彬","goodname":"13228898364","goodprice":"1級","qrcode":"培訓成功","totalprice":"鐘點工"} ] }); //點擊某列時獲取隱藏列的值,使用delegata是爲了獲取整個表格數據,包括js腳本生成的緩存數據,否則點下一頁時點擊事件失效 $("body").delegate('#dynamic-table tr', 'click', function () { var nTds = $("td",this); var sBrowser = $(nTds[0]).text();//獲取第一列的值,其中第一列爲隱藏列 debugger; });此時sBrowser的數據就是隱藏某列某行的數據
參考內容:http://www.cnblogs.com/tonylp/archive/2013/03/07/2947585.html