Обновить столбец данных - PullRequest
Новая
       14

Обновить столбец данных

0 голосов
/ 16 октября 2018

Как я могу обновить данные после загрузки динамического контента из запроса Ajax?Поток таков: 1. будет нажата кнопка, и эта кнопка содержит идентификатор 2. Я буду использовать этот идентификатор для выполнения Ajax-запроса к серверу 3. Сервер ответит на запись с переданного идентификатора 4. I 'загрузим очищенную инициализированную таблицу данных и загрузим новое содержимое из Ajax 5. Показать мод начальной загрузки.

Теперь моя проблема - столбец заголовка, и строка содержимого таблицы данных не подходит, как показано ниже enter image description here

Странная вещь об этом - когда я изменяю размер моего браузера, столбец заголовка соответствует содержимому таблицы.

Ниже приведен мой код для этого 

<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.Но проблема в том, что контент очень большой, и мне нужно, чтобы таблица имела фиксированную высоту

1 Ответ

0 голосов
/ 16 октября 2018

Попробуйте дождаться полной загрузки модала, а затем добавьте данные.Возможно, держатель данных еще не виден, и его окончательные размеры не были получены: 

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);
})
...