我是DataTables的新手。我想在每一行添加按钮进行编辑和删除(如下图)
我试过代码：
Test.cfm
<table id="myDataTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>UserID</th>
<th>Name</th>
<th>UserName</th>
<th>Passowrd</th>
<th>Email</th>
<th>IsActive</th>
<th>Command</th>
</tr>
</thead>
<tbody>
</tbody>
<script>
$(document).ready(function () {
var oTable = $('#myDataTable').dataTable({
// "bServerSide": true,"sAjaxSource": "fetchUserData.cfm","bProcessing": true,"sPaginationType": "full_numbers","aoColumns": [
{ "mData": null },{ "mData": "Name","sTitle": "Name","sWidth": "20%"},{ "mData": "UserName","sTitle": "UserName","sWidth": "20%" },{ "mData": "Passowrd","sTitle": "Passowrd","sWidth": "20%" },{ "mData": "Email","sTitle": "Email",{ "mData": "IsActive","sTitle": "IsActive",{
"mData": null,"bSortable": false,"mRender": function (o) { return '<a href=#/' + o.userid + '>' + 'Edit' + '</a>'; }
}
]
});
});
</script>
fetchUserData.cfm
{
"aaData": [
[
"1","sameek","sam","sameek@test.com","1",""
],[
"2","arun singh","arun","arunsingh@test.com","0",[
"9","s s","sam3","ss@s.com",[
"10","sameek mishra","sam56","same@s.com",[
"11","narendra kumar","narendra","nav","sa@sa.com",[
"12","test test","test","test2@test.com",""
]
]
}
请帮帮我。
谢谢
解决方法
基本上你的代码是可以的，这是正确的方法。无论如何，有一些误会：
> fetchUserData.cfm不包含键/值对。所以在mData中解密密钥是没有意义的。只需使用mData [index]
> dataTables需要您的服务器端的一些更多信息。至少你应该告诉数据库，总共有几个项目在你的服务器端，有多少个被过滤。
我刚刚将这个信息硬编码到你的数据。您应该从服务器端脚本中的计数中获取正确的值。
{
"iTotalRecords":"6","iTotalDisplayRecords":"6","aaData": [
[
"1",""
],...
>如果您在html部分中已经设置了列名，则不需要添加sTitle。
> mRender函数有三个参数：
> data =这个单元格的数据，如mData中定义的
> type =数据类型(可以大部分忽略)
> full =此行的完整数据数组。
所以你的mRender函数应该是这样的：
"mRender": function(data,type,full) {
return '<a class="btn btn-info btn-sm" href=#/' + full[0] + '>' + 'Edit' + '</a>';
}
找到一个工作的Plunker here
