如何获取隐藏的 ID 以删除 jQuery 数据表中的记录

Posted 2023-02-18

【中文标题】如何获取隐藏的 ID 以删除 jQuery 数据表中的记录

【英文标题】：How to get a hidden Id to delete a record in a jQuery Datatable

【发布时间】：2019-08-27 00:03:05

【问题描述】：

我的 jQuery DataTable 中有编辑和删除按钮。第一列是记录 ID 列并且是隐藏的。 我有编辑和删除按钮的事件处理程序。 我是否应该使用 DataTable click 和 tr 函数的事件处理程序来获取 id，或者如果使用按钮事件处理程序（首选），我如何从行中获取 Id？即确定点击了哪一行？

 const dataTable = $('#personTable').DataTable(
        data: serializedObject,
        columns: [
             data: 'ID', 'visible': false,  
             data: 'TitleCode' ,
             data: 'TitleDetail' ,
             data: 'FirstName' ,
             data: 'LastName' ,
            data: null
        ],
        columnDefs: [
            
                targets: 8, 
                data: 'ID',  //'<div class="btn-group" style="width:70px"> <button type="button"' +
                defaultContent: '<div class="floatRightClass" >' +
                        '<a class="btn btn-default glyphicon glyphicon-pencil btn-edit" title="Edit"> </a>' +
                        '<a class="btn btn-default glyphicon glyphicon-trash btn-delete" title="Delete"> </a>' +
                    '</div>'
            ,

        ]
    );

    $(".btn-delete").click(function (e)
    
        var dtTable = $('#personTable').DataTable();
        var selectedRows = dtTable.rows('tr.selected');

        var id = selectedRows.data().toArray().map(function (row)  return row.id );
        console.log("id= " + ID);

        // or
        console.log("id= " + dataTable.rows('tr.selected').data().toArray().map(function(row)return row.ID));


        // This works, but the row index is hardcoded
        alert("..." + dtTable.cells( row: 0, column: 0 ).data()[0]);

        // Error: undefined
        selectedIndex = dtTable.row(this).data()[0];
        alert("Id = " + selectedIndex.ID);

    );

   $('#personTable tbody').on('click', '.btn-delete', function ()
    
        var tr = $(this).closest("tr");
        var rowindex = tr.index();

        alert("rowindex " + rowindex);

        // Get the value of the ID in the hidden column (col: 0)
        alert("..." + dataTable.cells( row: rowindex, column: 0 ).data()[0]);
    );

【参考方案1】：

通过使用$('#personTable tbody').on('click', '.btn-edit2', function ()，我可以获得行的索引和隐藏单元格值或ID，用于服务器端-数据库-处理。

【讨论】：

当visible: false被应用时，对应的字段永远不会变成DOM的<td>元素，因此无法从click事件监听器中访问它。

【参考方案2】：

我会建议以下方法。

这里的基本部分是使用rows().remove() 方法（您不需要拥有要删除的记录的ID）。

但是，如果您还希望从后端存储中删除这些记录，您可以执行以下操作：

$('#delete').on('click', function() 
    const selectedRows = dataTable.rows('tr.selected');
    $.ajax(/* throw selected rows data (or particular properties) using selectedRows.data() */);
    selectedRows.remove().draw();
);

//source data
const srcData = [
  id: 1, name: 'Steve Rogers', title: 'Captain America',
  id: 2, name: 'Anthony Stark', title: 'Iron Man',
  id: 3, name: 'Peter Parker', title: 'Spider Man',
  id: 4, name: 'Bruce Banner', title: 'Halk',
  id: 5, name: 'Thor Odinsson', title: 'Thor'
];
//data table initialization
const dataTable = $('#mytable').DataTable(
  data: srcData,
  dom: 't',
  columns: [
    data: 'id', visible: false,
    data: 'name', title: 'Name',
	//append 'Edit'/'Delete' buttons to the rightmost edge of the cell
    data: 'title', title: 'Title', render: cellData => cellData+'<button class="delete">Delete</button><button class="edit">Edit</button>'
  ]
);
//delete button handler
$('#mytable').on('click', '.delete', function () 
	//grab parent <tr> node of the button, use it as 
	//a selector to throw its id into message and 
	//delete corresponding dataTable row
	const currentRow = dataTable.row($(this).closest('tr'));
	$('#msg').text(`Row id $currentRow.data().id ($currentRow.data().title) was removed`);
	currentRow.remove().draw();
);
//edit button handler
$('#mytable').on('click', '.edit', function()
	$(this).closest('tr').toggleClass('editing');
	if($(this).closest('tr').hasClass('editing')) 
		//turn each table cell into input field
		[...$(this).closest('tr').find('td')].forEach(function(td, colindex)
			$(td).html(`<input value="$dataTable.cell(td).data()"></input> $colindex==this.length-1?'<button class="delete">Delete</button><button class="edit">Edit</button>':''`)
		, $(this).closest('tr').find('td'));
	
	else 
		//grab input fields from within each cell and 
		//put their values into corresponding dataTable cell
		[...$(this).closest('tr').find('td')].forEach(function(td, colindex)
			const cellValue = $(td).find('input').val();
			dataTable.cell(td).data(cellValue);
			$(td).html(`$cellValue$colindex==this.length-1?'<button class="delete">Delete</button><button class="edit">Edit</button>':''`);
		, $(this).closest('tr').find('td'));
		dataTable.draw();
	
);

td button 
 display: block;
 float: right;

<!doctype html><html><head><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></head><body><table id="mytable"></table><div id="msg"></div></body></html>

【讨论】：

在 '=>

的事件定义中尝试上述方法时出现语法错误

可能，您使用的浏览器没有全面的 ES6 支持（可能是一些微软的东西）。修复了代码以避免箭头语法。

使用 IE 11，是的。我还将代码更改为与您的相同。所以没有错误，但是，在该 selectedRows 对象中如何或在何处找到某种方法来获取第 0 列（ID 隐藏列）及其值。或只是行索引）。这个物体很大而且很混乱。谢谢

正如上面代码 sn-p 中提到的，selectedRows.data() 将返回所选行的源数据（对象或数组）。

所以，如果你真的需要这些 id，如果我们坚持我的例子，你可以使用selectedRows.data().map(row => row.id)。