Обновить на столе, используя Ajax - PullRequest
Новая
       4

Обновить на столе, используя Ajax

0 голосов
/ 30 октября 2019

Я хочу обновить данные своей таблицы после обновления и сохранения работоспособности функции datatables. При редактировании строки из моей таблицы с помощью модального режима при обновлении таблицы функция обработки данных больше не работает, например, нумерация страниц и опция поиска.

Таблица: 

<table class="table table-responsive" id="table6">
    <thead>
        <tr>
            <th>Produto</th>
            <th>Stock</th>
            <th>Stock Minimo</th>
            <th>Ação</th>
        </tr>
    </thead>
    <tbody>
        <?php  do{ ?>
        <tr id="<?php echo $produto3["Id"]; ?>">
            <td><?php echo $produto3["Produto"]; ?></td>
            <td><?php echo $produto3["Quantidade"]; ?></td>
            <td><?php echo $produto3["Minimo"]; ?></td>
            <td><button type="button" id="<?php echo $produto3["Id"]; ?>" data-id="<?php echo $produto3["Id"]; ?>"  data-target="#add_data_Modal6" class="btn btn-warning btn-sm edit_data1" ><span class="glyphicon glyphicon-pencil"></span></button></td>
        </tr>
        <?php } while($produto3 = $result3->fetch_assoc()); ?>
    </tbody>
</table>

Тогда у меня есть модальное,Когда я сохраняю модальные изменения, я использую следующие js, где я обновляю свою таблицу: 

 function inserir_registo10() {
    var dadosajax = {
        'Id': $("#Id1").val(),
        'Produto': $("#Produto2").val(),
        'DescricaoUnid': $("#DescricaoUnid1").val(),
        'IdReqRec': $("#IdRec:checked").val(),
        'Quantidade1': $("#Qtd2").val(),
        'Quantidade': $("#Qtd1").val()
    };
    $.ajax({
        url: './alterarproduto',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function () {
            $(".error_message").removeClass('hide');
        },
        success: function (result) {
            $('.form10')[0].reset();
            $("#add_data_Modal12").modal("hide");
            $("#table6").load(" #table6 > *");
        }
    });
}

Изначально с функцией datatables таблица выглядит следующим образом, где на странице показано только десять записей: enter image description here

Но при успешном обновлении этой строки: 

$("#table6").load(" #table6 > *");

Функция datatables больше не работает и больше не отображает 10 записей на страницу, как показано на рисунке:

enter image description here

Ответы [ 2 ]

1 голос
/ 30 октября 2019

Хотя ваш вопрос не совсем понятен, вот мои мысли: я думаю, что проблема в том, что, как только вы рендерируете НОВЫЙ контент на свою страницу посредством ответа AJAX-ed, функции JavaScript, которые управляют таблицей - фильтрация и поиск -больше не работает. Это правильно?

Мое предположение, основанное на вашей информации: вам нужно повторно инициализировать таблицу JavaScript после успешного вызова AJAX. Вот некоторый псевдокод для демонстрации:

Возможно, у вас есть некоторый код JS для инициализации таблицы, например: 

$('.my-table').initialize()

После того, как вы вернете данные с помощью $.ajax и обновите таблицу,вам просто нужно повторно запустить этот код инициализации в success, например: 

$.ajax({
  ...
  success: function (result) {
    // Code to update your table here

    // And now we can reinitialize:
    $('.my-table').initialize()
  }
});
0 голосов
/ 31 октября 2019

Я решил свою проблему следующим образом. В рамках успеха ajax я уничтожаю таблицу данных, затем делаю асинхронный запрос и снова визуализирую таблицу с данными.

Код: 

   success: function(result)
    { 
    $('.form10')[0].reset();
    $("#add_data_Modal12").modal("hide");
    $('#table6').dataTable().fnDestroy();
    $.ajax({
       url: './atualizarprodutosrececao',
       type: 'get',
       dataType: 'json',
       success: function(data){
         var linha = ``; 
         for(let item of data){ 
         linha += `<tr id=${ item.Id }>          
         <td>${ item.Produto }</td> 
         <td>${ item.Quantidade }</td> 
         <td>${ item.Minimo }</td>   
         <td><button type="button" id="${ item.Id }" data-id="${ item.Id }"  data-target="#add_data_Modal6" class="btn btn-warning btn-sm edit_data1" ><span class="glyphicon glyphicon-pencil"></span></button></td>            
         </tr>`; 
         } 
         $("#table6 tbody").html(linha);
    $('#table6').dataTable({ 
            "pagingType": "full_numbers",                           
            "oLanguage": {
            "sProcessing": "Aguarde enquanto os dados são carregados ...",
            "sLengthMenu": "Mostrar _MENU_ registros por pagina",
            "sZeroRecords": "Nenhum registro correspondente ao criterio encontrado",
            "sInfoEmtpy": "Exibindo 0 a 0 de 0 registros",
            "sInfo": "Exibindo de _START_ a _END_ de _TOTAL_ registros",
            "sInfoFiltered": "",
            "sSearch": "<span class='glyphicon glyphicon-search'></span>",
            "oPaginate": {
            "sFirst":    "<span class='glyphicon glyphicon-fast-backward'></span>",
            "sPrevious": "<span class='glyphicon glyphicon-backward'></span>",
            "sNext":     "<span class='glyphicon glyphicon-forward'></span>",
            "sLast":     "<span class='glyphicon glyphicon-fast-forward'></span>"
        }
     }
     });             
         }

        });

    }
...