是否可以在 jQuery DataTables 中放置编辑和删除按钮？

Posted 2023-05-07

【中文标题】是否可以在 jQuery DataTables 中放置编辑和删除按钮？

【英文标题】：Is it possible to place Edit and Delete buttons in jQuery DataTables?

【发布时间】：2014-07-30 18:50:22

【问题描述】：

我是使用 jQuery DataTable 的初学者，我正在尝试将 Edit 和 Delete 按钮放置在 jQuery DataTable 中，并在引导程序中使用动态数据绑定，如下图所示：

但我收到一条错误消息：

控制器动作

    public class PhoneNumber
    
        public string Number  get; set; 
        public string Description  get; set; 
        public string Action  get; set; 
    

    public ActionResult LoadPhoneNumbers()
    
        var phoneNumbers = new List<PhoneNumber>(new[] 
        
            new PhoneNumber  Number = "555 123 4567", Description = "George",Action="" ,
            new PhoneNumber  Number = "555 765 4321", Description = "Kevin" ,Action="" ,
            new PhoneNumber  Number = "555 555 4781", Description = "Sam",Action=""  
        );

        return Json(new
        
            aaData = phoneNumbers.Select(x => new[]  x.Number, x.Description )
        , JsonRequestBehavior.AllowGet);
    

HTML

 <table id="tblAdminUsers" class="table table-striped table-bordered table-hover table-highlight table-checkable" 
                            data-info="true"
                            data-search="true"
                            data-paginate="true">
                            <thead>
                                <tr>                                       
                                    <th>Number</th>
                                    <th>Description</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

脚本

$(function () 

    $("#tblAdminUsers").dataTable(
        bProcessing: true,
        sAjaxSource: '@Url.Action("LoadPhoneNumbers", "Admin")',
        aoColumns: [
              mData: "Number" ,
              mData: "Description" ,
             
                 mData: "Action",
                 bSortable: false,
                 mRender: function (o)  return '<i class="ui-tooltip fa fa-pencil" style="font-size: 22px;" data-original-title="Edit"></i><i class="ui-tooltip fa fa-trash-o" style="font-size: 22px;" data-original-title="Delete"></i>'; 
             
        ]
    );
);

【问题讨论】：

是的，它可能遵循：datatables.net/examples/api/select_single_row.html

感谢您的宝贵回复。我尝试在每一行中放置我的编辑删除按钮。我想在 Action 列中添加按钮。您能否提供任何参考链接。

但我更喜欢 JQGrid 或 MVCGrid 或 KenduUI 让 mvc 执行此类操作

我同意了。我已经在其他一些项目中实现了 JQGrid，但是这个项目使用的是 bootstrap，我认为 jQgrid 不支持 bootstrap 响应样式。

KendoUI 可以，而且它也是免费的 :)

【参考方案1】：

我只是删除了aoColumns 属性中的mData 属性

在 dataTable 脚本中。

$(function () 

$("#tblAdminUsers").dataTable(
    bProcessing: true,
    sAjaxSource: '@Url.Action("LoadPhoneNumbers", "Admin")',
    aoColumns: [
          bSortable: false, ,
          bSortable: false, ,
         
             bSortable: false,
             mRender: function (o)  return '<i class="ui-tooltip fa fa-pencil" style="font-size: 22px;" data-original-title="Edit"></i><i class="ui-tooltip fa fa-trash-o" style="font-size: 22px;" data-original-title="Delete"></i>'; 
         
    ]
););

【参考方案2】：

只需关注此网址：http://editor.datatables.net/examples/styling/envelopeInTable.html。 这将解决您的问题。

【讨论】：

感谢您的宝贵回复，它是免费的吗？