如何使用 jQuery DataTables 捕获选定行中的数据

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5678624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 19:37:51  来源:igfitidea点击:

how to capture the data in a selected row using jQuery DataTables

jquerydatatables

提问by dnagirl

I have this datatable setup:

我有这个数据表设置:

$(document).ready(function() {
    $('#RectifiedCount').dataTable( {
        "bJQueryUI": true,
        "bProcessing": true,
        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "bStateSave": true,
        "sDom": '<"H"if>tr<"F"lTp>',
        "aoColumns":[
                     {'sname':'count_id', 'sType':'numeric', 'bVisible':false},
                     {'sName':'count_type', 'sType':'string','bVisible':true},
                     {'sName':'count_date', 'sType':'date','bVisible':true},
                     {'sName':'count_count', 'sType':'numeric','bVisible':true},
                     {'sName':'count_notes', 'sType':'string','bVisible':true}
                     ],
        "oTableTools": {
            "sRowSelect": "single",
            "sSwfPath": "media/swf/copy_cvs_xls_pdf.swf",
            "aButtons": [ {sExtends :'select_none' , 'sButtonText':'Clear Selection'}],
            "fnRowSelected": function(node){
                var s=$(node).children();
                if($(s[0]).text()=='Delivery') return ;
                $('select[name="count_type"]').val($(s[0]).text());
                $('input[name="count_date"]').val($(s[1]).text());
                $('input[name="count_count"]').val($(s[2]).text());
                $('textarea[name="count_notes"]').val($(s[3]).text());
            }
        },
        'sScrollX':'100%'
    });
});

When I select a row, I want to copy the values of the cells of that row into some form fields that are named the same as the 'sName' attributes. I have 2 questions:

当我选择一行时,我想将该行的单元格的值复制到一些与“sName”属性名称相同的表单字段中。我有两个问题:

  • is there a TableTools method for accessing the value of a cell in a selected row? Something like node['sName_whatever'].valuewould be nice.
  • how can I get the value of the cells where bVisible=false?
  • 是否有用于访问选定行中单元格值的 TableTools 方法?像node['sName_whatever'].value这样的东西会很好。
  • 如何获得 bVisible=false 的单元格的值?

ETA solution

ETA解决方案

(leaving out the unimportant stuff)

(忽略不重要的东西)

$(document).ready(function() {
    rctable=$('#RectifiedCount').dataTable( {
        "aoColumns":[
                     {'sname':'count_id', 'sType':'numeric', 'bVisible':false},
                     {'sName':'count_type', 'sType':'string','bVisible':true},
                     {'sName':'count_date', 'sType':'date','bVisible':true},
                     {'sName':'count_count', 'sType':'numeric','bVisible':true},
                     {'sName':'count_notes', 'sType':'string','bVisible':true}
                     ],
        "oTableTools": {
            "sRowSelect": "single",
            "fnRowSelected": function(node){
                aData = rctable.fnGetData(node); //nice array of cell values
                if(aData[0]=='Delivery') return ;
                $('select[name="count_type"]').val(aData[0]);
                $('input[name="count_date"]').val(aData[1]);
                $('input[name="count_count"]').val(aData[2]);
                $('textarea[name="count_notes"]').val(aData[3]);            }
        }
    });
});

回答by a1ex07

I did the following:

我做了以下事情:

 oTable = $('#RectifiedCount').dataTable( ....);

 $('#RectifiedCount tbody tr').live('click', function (event) {        
    var aData = oTable.fnGetData(this); // get datarow
    if (null != aData)  // null if we clicked on title row
    {
        //now aData[0] - 1st column(count_id), aData[1] -2nd, etc. 
    }
});

回答by Henrique C.

Mutch better way instead of hooking a click event, using just jquery and TableTools:

Mutch 更好的方法,而不是挂钩点击事件,只使用 jquery 和 TableTools:

"oTableTools": {
"sRowSelect": "single",
"fnRowSelected": function(node) {
    var row = $(node).find('td');
    //all cells
    $.each(row, function(index, td) {
        console.log($(td).text());
    });

    console.log("Specific cell content: " + $(row[2]).text());

}

}

}