ASP.NET MVC中为Ajax DataTable每行添加编辑、详情按钮求助

嘿，我来帮你搞定这个问题！要给Ajax加载的DataTable每行添加编辑和详情按钮，只需要在列配置里新增一列专门渲染操作按钮就行，下面是修改后的完整代码和关键说明：

修改后的CSHTML代码 #

<div class="row">
 <div class="col-md-12 col-sm-12 col-lg-12">
 <table id="myTable">
 <thead>
 <tr>
 <th>Last Name</th>
 <th>First Name</th>
 <th>Joining Date</th>
 <th>Actions</th> <!-- 新增操作列表头 -->
 </tr>
 </thead>
 </table>
 </div>
 </div>
 <script>
 $(document).ready(function() {
 var table = $('#myTable').DataTable({
 "ajax": {
 "url": "/Employee/loaddata",
 "type": "GET",
 "datatype": "json"
 },
 "responsive": true,
 "columns": [
 {
 "data": "FirstName",
 "autoWidth": true
 }, 
 {
 "data": "LastName",
 "autoWidth": true
 }, 
 {
 "data": "JoiningDate",
 "autoWidth": true,
 // 可选：格式化日期为更友好的显示格式
 "render": function(data) {
 return new Date(data).toLocaleDateString();
 }
 },
 // 新增操作列，渲染编辑和详情按钮
 {
 "data": "EmployeeId", // 用员工主键作为按钮的标识参数
 "autoWidth": true,
 "render": function(data, type, row) {
 return `
 <button class="btn btn-sm btn-primary edit-btn" data-id="${data}">编辑</button>
 <button class="btn btn-sm btn-info details-btn" data-id="${data}">详情</button>
 `;
 }
 }
 ]
 });

 // 编辑按钮点击事件（事件委托适配动态生成的按钮）
 $('#myTable').on('click', '.edit-btn', function() {
 var employeeId = $(this).data('id');
 // 这里可以跳转到编辑页面，或者弹出编辑模态框
 console.log('要编辑的员工ID:', employeeId);
 // 示例跳转：window.location.href = `/Employee/Edit/${employeeId}`;
 });

 // 详情按钮点击事件
 $('#myTable').on('click', '.details-btn', function() {
 var rowData = table.row($(this).closest('tr')).data();
 // 获取当前行的完整数据，可用于弹出详情模态框展示
 console.log('员工详情数据:', rowData);
 });
 });
 </script>

关键修改点说明 #

• 新增操作列表头：在<thead>里添加了<th>Actions</th>，对应操作按钮列的表头
• 渲染操作按钮：在columns数组最后新增一列，通过render函数动态生成编辑和详情按钮，并用员工模型的主键EmployeeId作为按钮的标识参数
• 绑定按钮事件：使用事件委托的方式绑定点击事件，确保动态生成的按钮能正常触发；可以通过data-id获取员工ID，或者用table.row().data()直接获取当前行的完整数据
• 可选日期格式化：如果需要对JoiningDate进行更友好的显示，可以在对应列的render函数里格式化日期

控制器代码无需修改 #

你的控制器代码已经正确返回了员工列表数据，不需要做任何调整。

内容的提问来源于stack exchange，提问作者Rifat Murtuza