在ASP.NET C#中使用jQuery DataTable获取Id时返回undefined问题

使用jQuery DataTable获取表格特定行的Id时，弹出的提示框显示undefined信息，相关代码如下：

前端HTML与JavaScript代码 #

<table id="gv_Datatable" class="table table-responsive table-hover">
    <thead>
        <tr>
            <th>Id</th>
            <th>Date</th>
            <th>Name</th>
            <th>Receipt</th>
            <th>Payment</th>
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
          <th>Id</th>
            <th>Date</th>
            <th>Name</th>
            <th>Receipt</th>
            <th>Payment</th>
            <th>Description</th>
        </tr>
    </tfoot>
</table>
<!-- jQuery -->
<script src="Plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">  
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "FillGridMethod.asmx/GetCashBookList",
            dataType: "json",
            success: function (data) {
                var datatableVariable = $('#gv_Datatable').DataTable({
                    dom: 'Bfrtip',      
                    data: data,
                    columns: [
                        { 'data': 'Id', visible: false },
                        {
                            'data': 'cashbookdate', 'render': function (date) {
                                var date = new Date(parseInt(date.substr(6)));
                                var month = date.getMonth() + 1;
                                return date.getDate() + "/" + month + "/" + date.getFullYear();
                            }
                        },
                        { 'data': 'cashbookaccname' },
                        { 'data': 'cashbookreceipt' },
                        { 'data': 'cashbookpayment' },
                        { 'data': 'cashbookdescription' },
                        {
                            "render": function (data, row) { return "<a href='#' id='" + row.Id +"' class='btn btn-success' onclick=DeleteCustomer(this); >Delete</a>"; }
                        }]
                });             
            }
        });

    }); 
    function DeleteCustomer(obj) {
        var rowID = $(obj).data("Id");
        alert(rowID);
    }
</script>  

后端GetCashBookList方法代码（AJAX调用） #

[WebMethod]
public void GetCashBookList()
{
    var cashBook = new List<CashBookModel>();
    string constr = cn.ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        qryFillGrid = " select cashbookid, cashbookdate, cashbookaccname, cashbookreceipt, cashbookpayment, cashbookdescription from tbl_cashbook ";
        var cmd = new SqlCommand(qryFillGrid, con);
        con.Open();
        var dr = cmd.ExecuteReader();
        while (dr.Read())
        {
            var cashBookModel = new CashBookModel
            {
                Id = Convert.ToInt32(dr[0]),
                cashbookdate = Convert.ToDateTime(dr[1]),
                cashbookaccname = dr[2].ToString(),
                cashbookreceipt = Convert.ToDecimal(dr[3]),
                cashbookpayment = Convert.ToDecimal(dr[4]),
                cashbookdescription = dr[5].ToString()
            };
            cashBook.Add(cashBookModel);
        }
    }
    var js = new JavaScriptSerializer();
    Context.Response.Write(js.Serialize(cashBook));
}

解决方案 #

问题出在两个核心点：

1. DataTable的render函数参数顺序错误，正确顺序为function(data, type, row, meta)，你将row放在了第二个参数位置，导致获取的不是当前行的数据对象。
2. DeleteCustomer函数中尝试通过$(obj).data("Id")取值，但并未给a标签设置data-id属性，因此返回undefined。

修改方案一：修正参数并添加data属性 #

// 修正render函数参数顺序，同时给a标签添加data-id属性
{
    "render": function (data, type, row, meta) { 
        return "<a href='#' data-id='" + row.Id + "' class='btn btn-success' onclick=DeleteCustomer(this); >Delete</a>"; 
    }
}

// 修改DeleteCustomer函数，注意data属性为小写id
function DeleteCustomer(obj) {
    var rowID = $(obj).data("id");
    alert(rowID);
}

修改方案二：使用DataTable API获取行数据（更规范） #

避免内联事件，通过DataTable API直接获取行数据：

// 全局存储表格实例
var datatableVariable;

$(document).ready(function () {
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "FillGridMethod.asmx/GetCashBookList",
        success: function (data) {
            datatableVariable = $('#gv_Datatable').DataTable({
                dom: 'Bfrtip',      
                data: data,
                columns: [
                    { 'data': 'Id', visible: false },
                    {
                        'data': 'cashbookdate', 'render': function (date) {
                            var date = new Date(parseInt(date.substr(6)));
                            var month = date.getMonth() + 1;
                            return date.getDate() + "/" + month + "/" + date.getFullYear();
                        }
                    },
                    { 'data': 'cashbookaccname' },
                    { 'data': 'cashbookreceipt' },
                    { 'data': 'cashbookpayment' },
                    { 'data': 'cashbookdescription' },
                    {
                        "render": function (data, type, row, meta) { 
                            return "<a href='#' class='btn btn-success delete-btn' data-row-index='" + meta.row + "'>Delete</a>"; 
                        }
                    }
                ]
            });             
        }
    });

    // 事件委托绑定删除按钮点击事件
    $('#gv_Datatable').on('click', '.delete-btn', function() {
        var rowIndex = $(this).data('row-index');
        var rowData = datatableVariable.row(rowIndex).data();
        alert(rowData.Id);
    });
});

内容的提问来源于stack exchange，提问作者s.k.Soni