如何获取数据表中选定的表格单元格的值 [英] How to get the selected Table cell value in datatable

问题描述

我使用jQuery-2.0.3.min.js，bootstrap.min.js和jQuery-UI-1.10.3.min.js，我的DataTable-1.9.4与tabletools，datatables.net/blog/Twitter_Bootstrap_2

I am using jquery-2.0.3.min.js, bootstrap.min.js, jquery-ui-1.10.3.min.js, DataTables-1.9.4 with 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>

DataTable的初始化脚本

Datatable initialisation Script

    $(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"
                }

            });

        });

编辑表单SCRIPT

EDIT FORM SCRIPT

       $(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
                });
            });
        });

我的问题。 （在编辑表格SCRIPT）

My Problem. (in EDIT FORM SCRIPT)

我需要向的DepartmentID传递给我的控制器（部门/编辑/'+的DepartmentID）

I need the DepartmentID to pass to my controller ('Department/Edit/' + departmentid)

我的看法
1） VAR ADATA = oDepartmentTable.fnGetData（本）始终显示在控制台铬不可用。

My observations 1) var aData = oDepartmentTable.fnGetData(this) always shows "not available" in chrome console.

2）VAR =的DepartmentID $（本）.parent（）。父（）。父（）。父（）。父（）。子女（）[0] .innerHTML 得到正确的DepartmentID如果我使用bVisible：真正的DataTable中初始化

2) var departmentid = $(this).parent().parent().parent().parent().parent().children()[0].innerHTML gets the correct departmentID if i use "bVisible": true in datatable initialisation.

（3）我不想显示的DepartmentID给最终用户。如果我做bVisible：数据表中的虚假初始化然后

(3) I dont want to show departmentID to the end user. if i make "bVisible": false in datatable initialisation then

VAR =的DepartmentID $（本）.parent（）。父（）。父（）。父（）。父（）。子女（）[0] .innerHTML 返回DEPARTMENTNAME

var departmentid = $(this).parent().parent().parent().parent().parent().children()[0].innerHTML returns the departmentName

感谢

推荐答案

看在数据表论坛的这里和 fnGetPosition

试试这个函数clickhandler来代替：

Try this clickhandler instead :

$(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 - 它没有在所有的工作。猜猜数据表的这方面已经取得了一些错误，并已在重构版本。

It works for me. However, not quite as the docs says. Also, I first tried out with datatables 1.9.1 - it didnt work at all. Guess this area of datatables have had some bugs and have been refactored over the versions.

这篇关于如何获取数据表中选定的表格单元格的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！