Bootstrap 可以在jQuery DataTables中放置Edit和Delete按钮吗?

5ssjco0h  于 11个月前  发布在  Bootstrap
关注(0)|答案(2)|浏览(136)

我是使用jQuery DataTable的初学者,我试图将编辑和删除按钮放置在jQuery DataTable中,并在bootstrap中使用动态数据绑定,如下图所示:


的数据
但我得到一个错误消息:


控制器操作

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>'; }
             }
        ]
    });
});

2nc8po8w

2nc8po8w1#

我只是删除了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>'; }
         }
    ]
});});

字符串

相关问题