数据表行行不是函数

如何解决数据表行行不是函数

我有我的 ASP.NET Core 项目，我在一页中显示了一个包含 DataTables 版本 1.10.23 的表格。数据来自 API。完整代码位于 GitHub。我想要的是显示 2 个用于编辑和删除的图标，以及当用户单击它们执行某些操作时，例如将使用重定向到编辑/删除页面。

$(document).ready(function () {
    var tblList = $('#list').dataTable({
        "processing": true,"responsive": true,"lengthChange": false,"autoWidth": false,dom: 'Blfrtip',"buttons": ["pageLength","copy","csv","excel","pdf","print","colvis"],"lengthMenu": [[10,25,50,-1],[10,"All"]],"serverSide": true,"filter": true,"columns": [
            @foreach (FieldUI item in Model.Fields)
            {
                @:{ "data": "@item.Data","name": "@item.Data" },}
            @if(Model.IsEditAllow)
            {
                @:{ data: null,className: "dt-center editor-edit",defaultContent: '<i class="fa fa-edit"/>',orderable: false,width: "25px" },}
            @if(Model.IsDeleteallow)
            {
                @:{ data: null,className: "dt-center editor-delete",defaultContent: '<i class="fa fa-trash"/>',}
        ],"columnDefs": [{
            "targets": [0],"visible": false,"searchable": false
        }],"ajax": {
            "url": "@Model.ApiUrl","type": "POST","datatype": "json"
        },"initComplete": function (settings,json) {
            $('#list tbody').on('click','tr',function () {
                Edit(this);
            });

            $('#list tbody').on('click',function () {
                Delete(this);
            });
        },"rowId": 'Id'
    });

    // Edit record
    function Edit(el) {
        var row = $(el).closest('tr');
        var id = tblList.row(row).data().id;
        alert('Edit ' + id);
    }

    // Delete a record
    function Delete(el) {
        var row = $(el).closest('tr');
        var id = tblList.row(row).data().id;
        alert('Edit ' + id);
    }
});

当用户点击图标时，会调用正确的函数，但会引发此错误

Countries:542 Uncaught TypeError: tblList.row 不是函数 在编辑（国家/地区：542） 在 HTMLTableRowElement。 （国家：530） 在 HTMLTableSectionElement.dispatch (jquery.js:5429) 在 HTMLTableSectionElement.elemData.handle (jquery.js:5233)

对于 documentation，我有 id 和 table.row，但它不起作用。

var table = $('#myTable').DataTable();
$('#myTable').on( 'click',function () {
    var id = table.row( this ).id();

    alert( 'Clicked row id '+id );
});

更新

我在表的定义中添加了 rowId。问题仍然存在。显然，.row 不是一个有效的函数。

解决方法

如何初始化 id 的示例：这里我使用 datauid 进行初始化

var table = $(".sampletable").DataTable({
  dom: "",// Load json with list of applicants
  ajax: "https://api.myjson.com/bins/391gc",columns: [{
    "data": "uid"
  },{
    "data": "location"
  },{
    "data": "date"
  }],// Set rows IDs
  rowId: function(a) {
    return 'id_' + a.uid;
  },});

另一个示例：

var aDataSet = [
    ['1','Trident','Internet Explorer 4.0','Win 95+','4','X'],['2','Internet Explorer 5.0','5','C'],['3','Internet Explorer 5.5','5.5','A'],['4','Internet Explorer 6','Win 98+','6',['5','Internet Explorer 7','Win XP SP2+','7',['6','Other browsers','All others','-','U']
];

$('#example').dataTable( {
    "aaData": aDataSet,"aoColumns": [
        { "sTitle": "Engine" },{ "sTitle": "Browser" },{ "sTitle": "Platform" },{ "sTitle": "Version","sClass": "center" },{ "sTitle": "Grade","sClass": "center" }
    ],"fnCreatedRow": function( nRow,aData,iDataIndex ) {
        $(nRow).attr('id',aData[0]);
    }
} );    

,

出于同样的原因，我可以使用用于创建 tblList 的变量 DataTables。 tblList 没有我需要的任何功能。所以，我要做的就是只更改 Edit 和 Delete 功能，如下

// Edit record
function Edit(el) {
    var table = $('#list').DataTable();
    var id = table.row(el).data().ID;
    alert('Edit ' + id);
}

// Delete a record
function Delete(el) {
    var table = $('#list').DataTable();
    var id = table.row(el).data().ID;
    alert('Delete ' + id);
}

现在，如果我在浏览器中使用开发者控制台，我可以使用 row 和所有其他提供的功能。

不客气！