datatable隐藏列同时可以获取列数据

13 篇文章 0 订阅
2 篇文章 0 订阅

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值