jquery-实现数据表折叠/展开功能
我正在尝试使用 jquery 数据表实现展开/折叠功能并遇到问题。我正在使用 datables 1.94 版（不是我的项目，所以请不要问我为什么）。
我正在浏览这个线程并尝试将这个示例改编为我的代码。
我有一个JSP 视图来构建表：
<div data-role="content" class="content">
<table id="MoreInfoTable" class="table table-condensed table-striped table-bordered" summary="Report search results" style="display: none;">
<thead>
<tr>
<th data-priority="1" name="instUnitNum" aria-label="instUnitNum" scope="col">FDIC Cert #</th>
<th data-priority="2" name="instName" aria-label="instName" scope="col">Institution Name</th>
<th data-priority="3" name="instAddress" aria-label="instAddress" scope="col">Institution Address</th>
<th data-priority="5" name="individualName" aria-label="individualName" scope="col">Individual Name</th>
<th data-priority="5" name="emailAddress" aria-label="emailAddr" scope="col">Email Address</th>
<th data-priority="5" name="phoneNumber" aria-label="phnNmbr" scope="col">Phone Number</th>
</tr>
</thead>
</table>
</div>
该表正在填充使用BackboneJs 模型进行 API 调用
var MoreInfoPageView = View.extend({
el : '#MoreInfoPage',
...
render : function() {
var that = this;
return this;
},
that.MoreInfoTable = DataTable(this.$(' #MoreInfoTable '),{
"bServerSide" : false,
"bProcessing" : false,
"iDisplayLength" : 10,
"bLengthChange" : true,
"bPaginate" : true,
"bSearching": true,
"bInfo": true,
"aaSorting": [ [0, 'desc'] ],
"oLanguage" : {"sInfo": "Total Records: _TOTAL_"},
"aoColumnDefs": [
{"sType": "num-html", "aTargets": [0] },
],
"aoColumns" : [
{"mDataProp" : function(d) {return (d.instUnitNum || '');}, "bSortable" : true, sName : 'instUnitNum'},
{"mDataProp" : function(d) { return (d.instName|| '');}, "bSortable" : true, sName : 'instName' },
{"mDataProp" : function(d) { return ( d.instAddress || '');}, "bSortable" : true, sName : 'instAddress' },
{"mDataProp" : function(d) { return ( d.individualName || '');}, "bSortable" : true, sName : 'individualName' },
{"mDataProp" : function(d) { return ( d.email || '');}, "bSortable" : true, sName : 'email' },
{"mDataProp" : function(d) { return ( d.phnNum || '');}, "bSortable" : true, sName : 'phnNum' },
],
"fnServerData" : function(sUrl, aoData, fnCallback, oSettings) {
that.loadReportData(aoData, fnCallback, oSettings);
},
"fnRowCallback" : function(nRow, aoData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr('aria-label', 'Hit enter to open this entry.');
},
"fnDrawCallback" : function(oSettings) {
if (that.MoreInfoTable)
that.MoreInfoTable.fnClearTable(true);
}
});
...
这成功地呈现了一个包含所有字段的表。
到目前为止，这些是我尝试过的修改（包括其他一些修改）：
在JSP View中，我在表格中添加了一个页脚行，如下所示：
<tfoot>
<tr>
<th data-priority="5" name="individualName" aria-label="individualName" scope="col">Individual Name</th>
<th data-priority="5" name="emailAddress" aria-label="emailAddr" scope="col">Email Address</th>
<th data-priority="5" name="phoneNumber" aria-label="phnNmbr" scope="col">Phone Number</th>
</tr>
</tfoot>
在我的View.js中，我添加了一个点击事件，如下所示：
events : {
'vclick #show-more' : 'showMoreDetails',
},
showMoreDetails : function() {
table.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');
},
that.MoreInfoTable = DataTable(this.$(' #MoreInfoTable '),{
"bServerSide" : false,
"bProcessing" : false,
"iDisplayLength" : 10,
"bLengthChange" : true,
"bPaginate" : true,
"bSearching": true,
"bInfo": true,
"aaSorting": [ [0, 'desc'] ],
"oLanguage" : {"sInfo": "Total Records: _TOTAL_"},
"aoColumnDefs": [
{"sType": "num-html", "aTargets": [0] },
],
"aoColumns" : [
"aoColumns" : [
{
"className": "details-control",
"orderable": false,
"data": "IndividualName",
"defaultContent": ''
},
{"mDataProp" : function(d) {return (d.instUnitNum || '');}, "bSortable" : true, sName : 'instUnitNum'},
{"mDataProp" : function(d) { return (d.instName|| '');}, "bSortable" : true, sName : 'instName' },
{"mDataProp" : function(d) { return ( d.instAddress || '');}, "bSortable" : true, sName : 'instAddress' },
{"mDataProp" : function(d) { return ( d.individualName || '');}, "bSortable" : true, sName : 'individualName' },
{"mDataProp" : function(d) { return ( d.email || '');}, "bSortable" : true, sName : 'email' },
{"mDataProp" : function(d) { return ( d.phnNum || '');}, "bSortable" : true, sName : 'phnNum' },
],
"fnServerData" : function(sUrl, aoData, fnCallback, oSettings) {
that.loadReportData(aoData, fnCallback, oSettings);
},
"fnRowCallback" : function(nRow, aoData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr('aria-label', 'Hit enter to open this entry.');
},
"fnDrawCallback" : function(oSettings) {
if (that.MoreInfoTable)
that.MoreInfoTable.fnClearTable(true);
}
});
但是单击按钮后什么也没有发生。请帮助我了解如何解决此问题。
谢谢
