Rails + 多个 DataTables + UI 嵌套手风琴

Question

我在嵌套的 UI 手风琴中使用了多个相似的数据表。虽然我使用类级选择器初始化多个数据表没有问题，但我在让任何给定表的页眉和页脚正确对齐时遇到问题。

我认为这与选项卡中的 dataTable 存在相同的问题：一旦显示手风琴窗格，就需要重新绘制表格（或标题）。

通过初始化单个表或基于 id 的初始化，我在函数中使用 fnDraw 或 fnAdjustColumnSizing 来重绘显示的表没有问题。但是，使用批量初始化，这种方法是行不通的，因为具体显示的表格不容易被定位。

我试图找到一种仅针对当前显示的表格进行重绘的方法，但没有成功。

还有其他人成功处理过这个问题吗？感谢您的任何想法....

Answer 1

我确信这是超级hacky，但是我可以设置它以便我可以创建一个动态的多级手风琴，每个手风琴都嵌套一个dataTable，实际上是将dataTable初始化嵌套在手风琴中激活（在表的级别），然后将表 div 标记为已初始化，以便可以重新打开它。这是我的js代码：

$(document).ready(function(){

    $(function() {   
        $('.accordion.second-level').bind('accordionactivate', function (event, ui) {

              if (ui.newPanel.length) {
                 thisPanel = ('#'+ ui.newPanel.attr('id'));
                 if ($(thisPanel).hasClass('not_activated')) {
                     $(thisPanel + ' .dataTables_types').dataTable({
                            "bAutoWidth": false,
                            "bPaginate": false,
                            "bScrollCollapse": true,
                            "sScrollY": "295px",
                            "aaSorting": [[ 1, "desc" ]],
                            "sDom": "<'row'<'span10'f>>t<'row'<'span10'i>>",
                             "aoColumns": [
                                            { "bSortable": false },
                                            null,
                                            null,
                                            { "iDataSort": 4 },
                                            {'bVisible': false},
                                            {'bVisible': false},
                                            null
                                          ],
                            "fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
                                           /* Calculate the total transactions on this page */
                                          var total = 0;
                                           for ( var i=iStart ; i<iEnd ; i++ )
                                          {
                                            total += aaData[ aiDisplay[i] ][5]* 1;
                                           }
                                           var nCells = nRow.getElementsByTagName('th');
                                           nCells[1].innerHTML = total;
                                           $(nCells[1]).formatCurrency({negativeFormat:'%s-%n'});
                            }
                    });
                   $(thisPanel).removeClass('not_activated');
                 }
                } 
        }); 
    });
});

我仍然很想知道是否有更好/更有效的方法来做到这一点，但这确实有效。