asp.net Jquery datatable通过单击按钮获取行id

uelo1irk  于 2023-10-21  发布在  .NET
关注(0)|答案(6)|浏览(199)

我在数据表的每一行上呈现了两个按钮:Edit和Delete。有没有可能在单击Delete或Edit按钮时获取雇员的ID或Row的ID,并将该ID值传递到我的一个Web方法中,该方法接受一个ID参数以从数据库中删除一条记录?
我的jquery代码到目前为止:

$(document).ready(function () {
        $.support.cors = true;
        $.ajax({
            url: '<%=ResolveUrl("GetEmployee.aspx") %>',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
              var table = $('#datatable').dataTable({
                    data: data,
                    columns: [
                        { 'data': 'Id' },
                        { 'data': 'image' },
                        { 'data': 'lastName' },
                        { 'data': 'firstName' },
                        { 'data': 'jobTitle' },
                        {
                            'data': 'StartDate',
                            'render': function (jsonDate) {
                                var date = new Date(parseInt(jsonDate.substr(6)));
                                var month = date.getMonth() + 1;
                                return date.getDate() + "/" + month + "/" + date.getFullYear();
                            }
                        },
                        {
                            'data': 'EndDate',
                            'render': function (jsonDate) {
                                var date = new Date(parseInt(jsonDate.substr(6)));
                                var month = date.getMonth() + 1;
                                return date.getDate() + "/" + month + "/" + date.getFullYear();
                            }
                        },
                        {
                            'data': null,
                            'render': function (data, type, row) {
                                return '<button id="' + row.id +'" onclick="editClick()">Edit</button>'
                            }
                        },
                        {
                            'data': null,
                            'render': function (data, type, row) {
                                return '<button id="' + row.id + '" class="dodo" onclick="deleteClick()">Delete</button>'
                            }
                        }
                    ]
                });
            }
        });

        $('#datatable').on('click', 'button', function () {
            var id = $(this).data();
            //var id = table.row($(this)).data();
            alert(JSON.stringify(id));
        });
    });

现在,当我试图获取id时,它返回了一个undefined。
我的webmethod:

[WebMethod]
    public static void DeleteRecord(string id)
    {
        var query = "DELETE FROM employee WHERE ID=?";
        OdbcConnection myConn = new OdbcConnection(myConnection);
        OdbcTransaction transaction = null;
        myConn.Open();

        transaction = myConn.BeginTransaction();
        OdbcCommand command = new OdbcCommand(query, myConn, transaction);
        command.Parameters.Add("ID", OdbcType.Int).Value = id;
        command.ExecuteNonQuery();

        transaction.Commit();

        myConn.Close();
    }

谢谢你,谢谢

23c0lvtd

23c0lvtd1#

是的,您可以在单击按钮时获得员工ID或行ID。为此,您需要在定义编辑和删除按钮时执行一些小的更改。

{
     'data': null,
     'render': function (data, type, row) {
                   return '<button id="' + row.id +'" onclick="editClick(this)">Edit</button>'
               }
},
{
     'data': null,
     'render': function (data, type, row) {
                       return '<button id="' + row.id + '" class="dodo" onclick="deleteClick(this)">Delete</button>'
               }
}

JavaScript / jQuery

function editClick (obj) {
      var rowID = $(obj).attr('id');
      var employeeID = $(obj).closest('tr').find('td:first').html());
}

function deleteClick (obj) {
      var rowID = $(obj).attr('id');
      var employeeID = $(obj).closest('tr').find('td:first').html());
}
2lpgd968

2lpgd9682#

  • 我可能知道三种方法 *
    1坏方法:go data for backEnd for example缺点短路和搜索.功能已禁用。额外的回应。
<a data-id="<?=yourQueryResult["id"]?>" onclick="javascript:foo()"></a>
function foo (){ var id = $(this)attr("data-id")}

<a onclick="javascript:foo(<?=yourQueryResult["id"]?>)"></a>
function foo(id){ /*deleting*/}

2在render函数上go JavaScript方法参数行id示例

render': function (data, type, row) {
                   return '<a onclick="javascript:foo('+ row.id +')"></a>'
               }

3我的jquery directk事件监听器获取行数据优点:干净的html,没有内联函数调用,所有的函数都是相同的文件调用。

var table = $('#datatable').dataTable({...})

$('#datatable tbody').on('click', 'a.delete', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);
            var id = row.data().yourColumnName;
        });
$('#datatable tbody').on('click', 'a.edit', function () {
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                var rowData = row.data();
            });
ccrfmcuu

ccrfmcuu3#

你应该使用.attr()方法来找出id属性。

$('#datatable').on('click', 'button.deleteButton', function () {
        var id = $(this).attr('id');
});
$('#datatable').on('click', 'button.editButton', function () {
        var id = $(this).attr('id');
});

DataTable

{
       'data': null,
        'render': function (data, type, row) {
               return '<button id="' + row.id +'" class="editButton">Edit</button>'
        }
 },
 {
       'data': null,
       'render': function (data, type, row) {
           return '<button id="' + row.id + '" class="deleteButton" >Delete</button>'
        }
}
nwo49xxi

nwo49xxi4#

你应该像这样将data-id添加到按钮中:

'<button data-id="' + row.id + '" id="' + row.id + '" class="dodo" onclick="deleteClick()">Delete</button>'

其他按钮相同,然后单击:

var id = $(this).data('id');

这将带来你的身份证

icomxhvb

icomxhvb5#

Just Get Row and its first parameter is your id and pass it into your deleteclick function

 {
        'data': null,
            'render': function (data, type, row) 
             {
                var id = row.id;
                return '<button id="' + row.id + '" class="dodo" onclick="deleteClick("' + id + '")">Delete</button>'
             }
 }

function deleteClick(var id)
{
      alert(id);  
}
xuo3flqw

xuo3flqw6#

$(document).ready(function () {
        $.support.cors = true;
        $.ajax({
            url: '<%=ResolveUrl("GetEmployee.aspx") %>',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
              var table = $('#datatable').dataTable({
                    data: data,
                    columns: [
                        { 'data': 'Id' },
                        { 'data': 'image' },
                        { 'data': 'lastName' },
                        { 'data': 'firstName' },
                        { 'data': 'jobTitle' },
                        {
                            'data': 'StartDate',
                            'render': function (jsonDate) {
                                var date = new Date(parseInt(jsonDate.substr(6)));
                                var month = date.getMonth() + 1;
                                return date.getDate() + "/" + month + "/" + date.getFullYear();
                            }
                        },
                        {
                            'data': 'EndDate',
                            'render': function (jsonDate) {
                                var date = new Date(parseInt(jsonDate.substr(6)));
                                var month = date.getMonth() + 1;
                                return date.getDate() + "/" + month + "/" + date.getFullYear();
                            }
                        },
                        {
                            'data': null,
                            'render': function (data, type, row) {
                                return '<button id="' + row.id +'" onclick="editClick()">Edit</button>'
                            }
                        },
                        {
                            'data': null,
                            'render': function (data, type, row) {
                                return '<button id="' + row.id + '" class="dodo" onclick="deleteClick()">Delete</button>'
                            }
                        }
                    ]
                });
            }
        });
$('#datatable tbody').on('click', 'button', function () {
  var data = table.row($(this)).data();
  alert(id[0]);//0 is column number starting from 0.
});

这会百分之百有效的

相关问题