DataTables:在ajax.reload上重新打开折叠的子行

时间:2018-12-17 11:01:27

标签: javascript jquery datatables

当尝试使用dataTable的ajax.reload函数自动重新加载表时,我试图重新打开子行。 (这将导致所有子行折叠)

我在互联网上找到了以下代码,并尝试实现它。但这对我不起作用。 https://datatables.net/forums/discussion/40777/statesave-type-option-for-child-row-state-class-of-open-row

重新加载表时,我的浏览器控制台日志中出现以下错误。

  

TypeError:openTableRows为空

希望有人可以帮助我或为我指明正确的方向。

ProjectInfoList = await _context.Project
     .Where(project => project.Branch == Branch)
     .Select(project => new ProjectSummary
         {
             ProjectID = project.ProjectID,
             ProjectName = project.Name,
             ProjectStart = project.Baselines
                 .DefaultIfEmpty(new Baseline { BaselineDates = new List<BaselineDate>() })
                 .OrderByDescening(b => b.DateSet)
                 .FirstOrDefault()
                 .BaselineDates
                 .Where(d => d.Comment == "Project Start")
                 .FirstOrDefault()
                 .Date
          }
       .AsNoTracking()
       .ToListAsync();

1 个答案:

答案 0 :(得分:0)

您是否有机会在这方面检查过official manual

提供的代码示例显然可以解决您的问题。对于您的特定数据表

$(document).ready(function() {
    var dt = $('#example').DataTable( {
...
})

跟踪扩展行的ID

// Array to track the ids of the details displayed rows
    var detailRows = [];

    $('#example tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
        if ( row.child.isShown() ) {
            ...     
            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            ...
            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

每次重新绘制数据表/调用ajax.reload时,重新打开展开的行

// On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
        } );
    } );