写写代码：利用JQuery 和dataTable callback，让对话框中表格显示更完美

有一表格，是放在Bootstrap 的Modal 框里面显示的。

因为Modal里面的内容是动态加载的，也就是Modal 对话框打开后，进行加载目标URL进行显示。而目标内容里面是表格，并且使用了dataTable进行渲染，毕竟这个dataTable表格JS格式漂亮，带分页带搜索之类的功能。

但是现在发现个问题，就是打开对话框后，先能看到一个比较丑陋的表格，接着是dataTable的JS和CSS加载完毕后才显示渲染正常的dataTable的表格。也就是渲染有个延迟。这种感觉让人很不爽。

于是查阅dataTable资料，终于找到办法了。参考 : http://legacy.datatables.net/usage/callbacks

实现办法就是在渲染完成之前先将表格区域也就是modal-body 进行隐藏。等到 dataTable 初始化完成后，也就是fnInitComplete事件，再将内容显示出来。

Modal 相关的JS脚本：

<script>
$(function() {
   $(".detail").click(function() {
    var lurl = String($(this).data('id'));
    $(".modal-title").html("Loading...");
    $(".modal-body").hide();
    $(".modal-body").load(lurl);
       });
});
</script>    

dataTable所在页面相关JS脚本

<script>
    $(document).ready(function() {
    $('#fail_detail_table').DataTable({
        "fnInitComplete": function(oSettings, json) {
          $(".modal-title").html("Detail");
          $(".modal-body").show();
        }
    });
} );
</script>

转载请注明：Linc Hu » 写写代码：利用JQuery 和dataTable callback，让对话框中表格显示更完美