问题描述
我有我的 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
和所有其他提供的功能。
不客气!