如何在数据表中获取选定的表格单元格值

Posted 2023-05-07

【中文标题】如何在数据表中获取选定的表格单元格值

【英文标题】：How to get the selected Table cell value in datatable

【发布时间】：2013-08-09 05:01:35

【问题描述】：

我正在使用 jquery-2.0.3.min.js、bootstrap.min.js、jquery-ui-1.10.3.min.js、DataTables-1.9.4 和 tabletools、datatables.net/blog/Twitter_Bootstrap_2

我的观点

  <div id="windowDepartment" title="Departments"></div>


 <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-hover table-condensed" id="DepartmentTable">
        <thead>
            <tr>
                <th>departmentID</th>
                <th>departmentName</th>
                <th>description</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

数据表初始化脚本

    $(document).ready(function () 
    oDepartmentTable = $('#DepartmentTable').dataTable(
            

                "sDom": "T<'clear'>lfrtip",
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bServerSide": true,
                "sAjaxSource": "Department/AjaxList",
                "aaSorting": [[2, 'asc'], [3, 'asc']],
                "aoColumns": [
                                 "mDataProp": "departmentID", "sType": "string", "bVisible": false, "bSearchable": false ,
                                 "mDataProp": "departmentName", "sType": "string", "bVisible": true, "bSearchable": true ,
                                 "mDataProp": "description", "sType": "string", "bVisible": true, "bSearchable": true ,
                                 "mDataProp": null,"bSearchable": false,
                                 "sDefaultContent": '<div class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#"><span class="icon-circle-arrow-down"></span></a><ul class="dropdown-menu"><li><a class="editDepartment"> <i class="icon-pencil"></i> Edit</a></li><li><a class="deleteDepartment"> <i class="icon-trash"></i> Delete</a></li></ul></div>'
                                
                            ],

                "oTableTools": 
                    "sSwfPath": "/Content/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
                

            );

        );

编辑表单脚本

       $(document).ready(function () 
            $('#DepartmentTable tbody').on('click', 'a.editDepartment', function (e) 
                e.preventDefault();

                //1. Dose not work shows "not available"
                var aData = oDepartmentTable.fnGetData(this)

                //2. Gets the correct ID if "bVisilble=true"
                var departmentid = $(this).parent().parent().parent().parent().parent().children()[0].innerhtml ;

                //goto Edit Controller. DepartmentID is required here  
                $.get('Department/Edit/' + departmentid , function (data) 
                    $('div#windowDepartment').html(data);

                    //Open Dialog box 
                    $("#windowDepartment").dialog().dialog(
                        resizable: true,
                        height: 500,
                        width: 500,
                        modal: true,
                        buttons:
                    
                        Edit: function () 
                            editDepartment();   //Saves the data. Works fine
                        , // end ok button

                        Cancel: function () 
                            $(this).dialog("close");
                        
                    ,  //end buttons
                        close: function () 
                            $(this).dialog("close");
                        
                    ); //end modal edit
                );
            );
        );

我的问题。 （在编辑表单脚本中）

我需要将 DepartmentID 传递给我的控制器（'Department/Edit/' + departmentid）

我的观察 1) var aData = oDepartmentTable.fnGetData(this) 总是在 chrome 控制台中显示“不可用”。

2) var departmentid = $(this).parent().parent().parent().parent().parent().children()[0].innerHTML 如果我在数据表初始化中使用 "bVisible": true 则获取正确的部门 ID。

(3) 我不想向最终用户显示部门 ID。如果我在数据表初始化中设置 "bVisible": false 然后

var departmentid = $(this).parent().parent().parent().parent().parent().children()[0].innerHTML 返回部门名称

谢谢

【参考方案1】：

查看datatables论坛here和fnGetPosition的讨论

试试这个 clickhandler：

$(document).ready(function () 
    $('#DepartmentTable tbody tr').on('click', function (e) 

        // get the position of the current data from the node
        var aPos = oDepartmentTable.fnGetPosition( this );

        // get the data array
        var aData = oDepartmentTable.fnGetData( aPos[0] );

        // get departmentID for the row
        var departmentID = aData[aPos].departmentID;
        console.log(departmentID);

        // ... do your stuff here, eg
        //goto Edit Controller. DepartmentID is required here  
        //$.get('Department/Edit/' + departmentid , function (data) 
        //..
        //..
    );
);

它对我有用。但是，并不像文档所说的那样。另外，我首先尝试使用数据表 1.9.1 - 它根本不起作用。猜猜这个数据表区域有一些错误，并且已经在版本上进行了重构。