如何在数据表中的每一行添加按钮？ [英] How do I add button on each row in datatable?
问题描述
我是DataTables的新手。我想在每一行添加按钮进行编辑和删除（如下图所示）
I am newbie for DataTables. I want to add button on each row for edit and delete(like below image)
我尝试使用代码：
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>
$(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" , "sWidth": "20%"},
{ "mData": "IsActive","sTitle": "IsActive" , "sWidth": "20%" },
{
"mData": null,
"bSortable": false,
"mRender": function (o) { return '<a href=#/' + o.userid + '>' + 'Edit' + '</a>'; }
}
]
});
} );
fetchUserData.cfm
{
"aaData": [
[
"1",
"sameek",
"sam",
"sam",
"sameek@test.com",
"1",
""
],
[
"2",
"arun singh",
"arun",
"arun",
"arunsingh@test.com",
"0",
""
],
[
"9",
"s s",
"sam3",
"sam3",
"ss@s.com",
"0",
""
],
[
"10",
"sameek mishra",
"sam56",
"sam",
"same@s.com",
"0",
""
],
[
"11",
"narendra kumar",
"narendra",
"nav",
"sa@sa.com",
"1",
""
],
[
"12",
"test test",
"test",
"test",
"test2@test.com",
"1",
""
]
]
}
推荐答案
基本上你的代码没问题，这是正确的方法。无论如何，有一些误解：
Basically your code is okay, thats the right way to do this. Anyhow, there are some misunderstandings:
-
fetchUserData.cfm不包含键/值对。因此，在mData中解决密钥没有意义。只需使用
mData [index]
dataTables需要来自服务器端的更多信息。至少你应该告诉datatables你的服务器端总共有多少项目以及过滤了多少项目。
我刚刚将这些信息硬编码到您的数据中。您应该从服务器端脚本中的计数中获取正确的值。
dataTables expects some more info from your serverside. At least you should tell datatables how many items in total are on your serverside and how many are filtered. I just hardcoded this info to your data. You should get the right values from counts in your server sided script.
{
"iTotalRecords":"6",
"iTotalDisplayRecords":"6",
"aaData": [
[
"1",
"sameek",
"sam",
"sam",
"sameek@test.com",
"1",
""
],...
如果您已在html部分中设置了列名，则无需添加sTitle。
If you have the column names already set in the html part, you don't need to add sTitle.
mRender函数有三个参数：
The mRender Function takes three parameters:
- data =的数据此单元格，如mData中所定义
- type =数据类型（主要可以忽略）
- full =此行的完整数据数组。
所以你的mRender功能应如下所示：
So your mRender function should look like this:
"mRender": function(data, type, full) {
return '<a class="btn btn-info btn-sm" href=#/' + full[0] + '>' + 'Edit' + '</a>';
}
找一个有效的Plunker 这里
Find a working Plunker here
这篇关于如何在数据表中的每一行添加按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
