引导模式标题宽度问题中的数据表问题

当我在部分视图中将scrollY添加到数据表时，标题被压缩到屏幕的左侧。当我点击标题进行排序时，它们会正确扩展至100％。使用滚动选项并向下滚动足够的距离也会触发列被正确渲染。引导模式标题宽度问题中的数据表问题

当每个列标题的宽度看，该宽度被设定为0 做上述之一后，则该宽度被校正，因为它们应该的。从主视图

触发立即加载部分

$('a[data-target="#list-view-audits-modal"]').on('click', function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: "GET", 
     url: "../Home/GetAudits", 
     success: function (data) { 
      $('body').append(data); //this adds the modal called below 
      $('#list-audits-modal').modal('toggle') 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      WebUI.handleError(XMLHttpRequest, textStatus, errorThrown); 
     } 
    }); 
});

在局部视图我拨打以下改造

$(function() { 
var dt = $('#table-audits-results').DataTable({ 
    order: [[0, "desc"]], 
    buttons: ['csv'], 
    scrollY: 200, 
    scroller: true, 
    responsive: true 
    }); 
});

我已经搜索并尝试这么多事情，我已经找到了表在其他职位，但迄今没有任何解决这个问题。我认为这与它在局部视图中转化有关？

更新1

好了，所以看来这是一个问题，因为该模式没有大小呢。为了测试这个，我在转换数据表的触发器中放了一段延迟，现在头是正确的。

现在我需要弄清楚如何在模态有一个大小时立即触发，以便用户不会看到标准表并观察它转换为DataTable。

更新2

我曾尝试以下，但你仍然可以看到的数据载荷的质量量它的转化

$(document).on('show.bs.modal', '#list-audits-modal', function() { 
    alert('triggered'); 
    var dt = $('#table-audits-results').DataTable({ 
     order: [[0, "desc"]], 
     buttons: ['csv'], 
     scrollY: 200, 
     scroller: true, 
     responsive: true 
    }); 
});

更新3

我之前不相信这是理想的，因为这还有一个延迟用户看到标题不正确，所以仍在寻找更好的解决方案

我在部分视图中使用了什么。

var dt = $('#table-audits-results').DataTable({ 
    order: [[0, "desc"]], 
    dom: 'Bfrtip', 
    buttons: ['csv'], 
    scrollY: 200, 
    scroller: true, 
    responsive: true 
}); 

$(document).on('shown.bs.modal', '#list-audits-modal', function() { 
    dt.columns.adjust().draw(); 
});

来源

2016-08-03 Tsukasa

你的最新片段是一个正确的解决方案，请参见[jQuery DataTables：列宽问题Bootstrap选项卡]（http://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/）。 –

谢谢你的资源。当我在寻找信息时，我的Google-Fu技能失败了。 – Tsukasa

$(document).on('shown.bs.modal', '#list-audits-modal', function() { 
    dt.columns.adjust().draw(); 
});

是好但

$(document).on('shown.bs.modal', '#list-audits-modal', function() { 
     dt.columns.adjust(); 
    });

也将精细

由于.draw()会发送请求给服务器如果服务器处理开启

来源

2017-05-06 22:52:48

引导模式标题宽度问题中的数据表问题

回答

相关问题