Question

从Ajax请求加载动态内容后，如何刷新数据表？流程是这样， 1.单击一个按钮，此按钮包含一个ID 2.我将使用此ID向服务器发出Ajax请求 3.服务器将通过传递的ID回复记录 4.我将清除初始化后的数据表并从Ajax加载新内容 5.显示引导模态。

现在我的问题是标题列和数据表的内容行不适合，如下所示

奇怪的是，当我调整浏览器的大小时，标题列与表格内容相符。

下面是我的代码

<table id="mytable" class="cell-border" cellspacing="0" width="100%">
     <thead class="table-header">
     <tr>                            
       <th>Comptetitor Item ID</th>
       <th>Competitor Seller</th>
       <th>Competitor Title</th>
       <th>Competitor Price</th>
       <th>Competitor Quantity Sold</th>
       <th>Competitor Listing Status</th>
     </tr>
     </thead>
</table>


table1 = $('#mytable').DataTable({
        scrollY         : "250px",
        scrollCollapse  : true,
        fixedColumns    : false,
        paging          : false,
        searching       : false,
        bInfo           : false,
        bSort           : false,
    });

$(document).on("click", ".a_tag_link",function() {
        var row_id = $(this).data("row_id");   

        $.ajax({
            type:'GET',
            url:'/ajax/server_process',
            dataType: 'json',
            data: {
                _token: "{{ csrf_token() }}",
                view_id: $(this).data("row_id")
            },
            beforeSend: function() {
                $.blockUI({ baseZ: 9999 });
            },
            success:function(response){                                   
                table1.rows().remove().draw();                   

                $("#mymodal").modal("show");
                table1.rows.add(response.data).draw(true);
            },
            complete: function(){
                $.unblockUI();
            }
        });
    return false;
});

请帮助我。我只希望列标题内容适合表内容，而无需调整浏览器的大小。

更新：删除scrollY属性后，该表已修复。但是问题是内容很大，我需要桌子固定高度

Answer 1

尝试等待模式完全加载，然后附加数据。数据表持有人可能还不可见，并且没有得到其最终尺寸：

success:function(response){                                   
    table1.rows().remove().draw();                   
    $("#mymodal").modal("show");
    setTimeout(function() {
        table1.rows.add(response.data).draw(true);
    },250);        
},

您还可以收听模态的自定义事件，并在模态完成动画后绘制数据表：

success:function(response){                                   
    table1.rows().remove().draw();                   
    $("#mymodal").modal("show");        
    table1.rows.add(response.data);             
},

...

$('#myModal').on('shown.bs.modal', function (e) {
    $('#mytable').DataTable().draw(true);
})

刷新数据表列

1 个答案: