datatable隱藏列同時可以獲取列數據

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_ 條 &nbsp;&nbsp;共 _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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章