我是使用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>'; }
}
]
});
});
型
2条答案
按热度按时间2nc8po8w1#
我只是删除了
aoColumns
属性中的mData
属性在dataTable脚本中。
字符串
f0ofjuux2#
请输入URL:http://editor.datatables.net/examples/styling/envelopeInTable.html。
这将解决您的担忧。