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

时间:2013-03-30 03:08:13

标签: ruby-on-rails-3 twitter-bootstrap datatables jquery-ui-accordion

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

我认为这与选项卡中的dataTable是同一个问题:显示手风琴窗格后需要重绘表格(或标题)。

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

我试图找到一种只定位当前显示的表格进行重绘的方法,但尚未成功。

有没有其他人成功处理过这个问题?谢谢你的任何想法......

1 个答案:

答案 0 :(得分:0)

我确定这是超级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');
                 }
                } 
        }); 
    });
});

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