[英]Edit button on JQuery DataTable
I am displaying a data using JQuery DataTable, and I want to make a edit button for each rows in that table.我正在使用 JQuery DataTable 显示数据,并且我想为该表中的每一行制作一个编辑按钮。
However, I have 2 problems which regarding that button.但是,我有两个关于该按钮的问题。
1. Once I run the application, the Edit button will trigger automatically (which redirect to the new page).
2. I want to get the information of the first column of the selected row, but what I got is undefined value.
Here is the code that I am using:这是我正在使用的代码:
HTML: HTML:
<table id="tblMember">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Status</th>
<th>Account</th>
<th>Action</th>
</tr>
</thead>
</table>
JS: JS:
$('#tblMember').dataTable({
bProcessing: true,
bServerSide: true,
iDisplayLength: 10,
sAjaxSource: "~/MemberService.ashx",
fnServerData: function (sSource, aoData, fnCallback) {
aoData.push({ "name": "GroupAccount", "value": "Account" })
$.ajax({
type: "POST",
data: aoData,
url: sSource,
dataType: "json",
success: function (msg) {
fnCallback(msg);
$("#tblMember").dataTable().show();
}
});
},
columnDefs: [
{
width: "10%",
className: "dt-body-center",
targets: -1,
data: "Name",
render: function (data, type, full, meta) {
return "<button onclick='" + GetSelectedData(data) + "'><i class='fa fa-pencil' aria-hidden='true'></i></button>";
}
}
]
});
}
function GetSelectedData(value) {
window.location = "~/Registration.aspx?Name='" + value + "'";
}
What I am missing?我缺少什么?
Your answer much appreciated.非常感谢您的回答。
Thank you.谢谢你。
Well when I had a similar requirement I have created the button with property columnDefs
but handled its click call outside of the DataTable
definition.好吧,当我有类似的要求时,我创建了具有属性
columnDefs
的按钮,但在DataTable
定义之外处理了它的点击调用。
I am providing the solution assuming your table is initializing properly except the edit button issue.我提供的解决方案假设您的表正在正确初始化,但编辑按钮问题除外。
Demo : https://jsfiddle.net/Prakash_Thete/j3cb2bfo/5/演示: https : //jsfiddle.net/Prakash_Thete/j3cb2bfo/5/
Adding the edit button to your table :将编辑按钮添加到您的表格中:
"columnDefs": [
{
className: "dt-body-center",
targets: -1,
defaultContent: ["<i class='fa fa-pencil editButton' aria-hidden='true' aria-hidden='true'></i>"]
}
]
Handling the click call of the edit button处理编辑按钮的点击调用
Assuming假设
var memberTable = $('#tblMember').dataTable({
then然后
$('body').on('click', '#tblMember tbody tr .editButton', function () {
var rowData = memberTable.row( $(this).parents('tr')).data();
console.log("Rows data : ", rowData);
//fetch first column data by key if you are passing map as input to table
console.log("First column data : ", rowData[0]);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.