使用Ajax Source的JQuery DataTable行显示/隐藏不起作用 [英] JQuery DataTable row show/hide using Ajax Source not working
本文介绍了使用Ajax Source的JQuery DataTable行显示/隐藏不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，
请帮忙。我做了很多研究，无法得到解决方案。尝试使用Ajax源复制此示例..
http： //datatables.net/examples/api/row_details.html [ ^ ]
这是我的代码：
Hi all,
Please help. I have done lot of research and can't get the solution. Trying to duplicate this example using Ajax source..
http://datatables.net/examples/api/row_details.html[^]
Here is my code:
<body id="dt_example">
<div id="container"> <!-- Begin #Container -->
<div class="full_width big">List of Events</div>
<div id="demo">
<h3>Employees</h3>
<table id="the_table" class="display" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Telephone</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br />
</div>
</div> <!-- End demo-->
</body>
var oTable;
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[3]+'</td></tr>';
sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
sOut += '</table>';
return sOut;
}
$(document).ready(function() {
oTable = $('#the_table').dataTable( {
"bProcessing" : true,
"sAjaxSource" : "getEmpListJSON.json", // ajax to take the data
"aoColumns" : [ {
"bSortable": false
},{
"mData" : "id"
},{
"mData" : "firstname"
}, {
"mData" : "lastname"
}, {
"mData" : "email"
}, {
"mData" : "telephone"
} ],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[1, 'asc']],
// "fnInitComplete": fnOpenClose
});
$('#example tbody td img').on( 'click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "resources/images/showhide_images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "resources/images/showhide_images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
我无法获得行显示/隐藏工作。任何建议。
谢谢。
I cannot get the row show/hide working. Any suggestions.
Thank you.
推荐答案
（document）.ready（function（）{
oTable =
(document).ready(function() { oTable =
（' ＃the_table'）。dataTable（{
bProcessing： true ，
sAjaxSource： getEmpListJSON.json， // ajax获取数据
aoColumns ：[{
bSortable： false
}，{
mData： id
}，{
mData： firstname
}， {
mData： lastname
}，{
mData： email
}，{
mData： 电话
}]，
bJQueryUI： true ，
sPaginationType ： full_numbers，
aaSorting：[[ 1 ，' asc']]，
// fnInitComplete：fnOpenClose
}）;
('#the_table').dataTable( { "bProcessing" : true, "sAjaxSource" : "getEmpListJSON.json", // ajax to take the data "aoColumns" : [ { "bSortable": false },{ "mData" : "id" },{ "mData" : "firstname" }, { "mData" : "lastname" }, { "mData" : "email" }, { "mData" : "telephone" } ], "bJQueryUI": true, "sPaginationType": "full_numbers", "aaSorting": [[1, 'asc']], // "fnInitComplete": fnOpenClose });
（' < span class =code-string>＃example tbody td img'）。on（' click'，function（）{
var nTr =
('#example tbody td img').on( 'click', function () { var nTr =
这篇关于使用Ajax Source的JQuery DataTable行显示/隐藏不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
