我是使用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>'; }
}
]
});
});
请帮助。
答案 0 :(得分:8)
我只是移除mData
属性
aoColumns
属性
在dataTable Script中。
$(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>'; }
}
]
});});
答案 1 :(得分:4)
只需关注此网址:http://editor.datatables.net/examples/styling/envelopeInTable.html。 这将解决您的担忧。