我需要在按钮的功能中从json对象获取一个id。如果我尝试直接访问id我得到undefined
(不是错误/警告)但是如果我尝试访问该对象,我可以毫无问题地看到它(id和其余数据)。
var table = $('#example').DataTable( {
serverSide: true,
dom: 'Bfrtip',
ajax: '/get?op=2',
columns: [
{ data: 'id' },
// more columns
],
buttons: [
{
text: 'New',
action: function ( e, dt, node, config ) {
window.location.href = '/url?op=new'
}
},
{
text: 'Modify',
action: function ( e, dt, node, config ) {
window.location.href = '/url?op=modify&id=' + dt.row( { selected: true } ).id() )
},
enabled: false
},
{
text: 'Delete',
action: function ( e, dt, node, config ) {
},
enabled: false
}
],
select: true
} );
我可以访问json对象:
alert( JSON.stringify(dt.row( { selected: true } ).data()) );
// {"id":1,"key":"value","etc":"etc"}
该工作正常,我可以在警报中看到该对象。
alert( dt.row( { selected: true } ).id() ); // undefined
alert( JSON.stringify(dt.row( { selected: true } ).id()) ); // "undefined"
alert( JSON.stringify(dt.row( { selected: true } ).data()[0]) ); // undefined
这不起作用,我可以看到undefined
而不是警报中的整数。
我尝试了很多我甚至无法记住但却没有工作的东西......
我做错了什么?
答案 0 :(得分:1)
我认为这就是你要做的。看看我的修改按钮,我之后添加的按钮。我正在使用extn,但如果您的数据有id字段,您应该能够更改名称以匹配。进行了一些其他更改,以便它可以在我的本地环境中运行,但是如果您在jsfiddle中设置或在本地进行播放,它应该可以工作。
注意:这假设一次只能选择一行。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css " rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/buttons/1.1.0/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/select/1.1.0/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/select/1.1.0/js/dataTables.select.min.js" type="text/javascript"></script>
<script type="text/javascript">
var mydata = [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}];
$(document).ready(function() {
$.map(mydata, function (item, key) {
item["DT_RowId"] = item["extn"]});
var table = $('#example').DataTable( {
serverSide: false,
dom: 'Bfrtip',
data:mydata,
columns: [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
// more columns
],
buttons: [
{
text: 'New',
action: function ( e, dt, node, config ) {
window.location.href = '/url?op=new'
}
},
{
text: 'Modify',
action: function (e, dt, node, config) {
window.location.href = '/url?op=modify&id=' + dt.row( { selected: true } ).id() ;
},
enabled: true
},
{
text: 'Delete',
action: function ( e, dt, node, config ) {
},
enabled: false
},
{
extend: 'selected',
text: 'Modify',
action: function ( e, dt, button, config ) {
var rw = dt.rows({ selected: true }).data()[0];
window.location.href = '/url?op=modify&id=' + rw.extn;
}
}
],
select: true
} );
} );
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%" class="display" id="example" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</form>
</body>
</html>
答案 1 :(得分:0)
您可以像这样使用render属性
"render": function (data, type, full, meta) {
var varName = full.varName;
return '<div>'+ varName +'</div>' //or whatever html you want to render
}