Как добавить результат ajax в модальный с датируемым

Question

Добрый день всем!Я пытаюсь добавить свой результат Ajax в мои данные внутри моего модального.Я уже получаю данные, которые мне нужны, но они все еще показывают, что данные недоступны.

Это выглядит так:

Это мой ajax-успех, который обработал результат.

    success: function(result)
    { 
      //console.log(result);
      //$('#viewTable').empty();
      $.each(result, function(index, value){
        console.log(value);

        $('#viewTable').append(
         '<tbody>' + 
             '<tr>' +
                '<td>' + value.qr_code + '</td>' +
                '<td>' + value.reference_no + '</td>' +
                '<td>' + value.brand_name + '</td>' +
                '<td>' + value.model_name + '</td>' +
                '<td>' + value.unitPrice + '</td>' +
             '</tr>' +
          '</tbody>'
          );
      });

Это мой HTML

        <table id="viewTable" class="table table-striped">
          <thead>
            <tr>
              <th>Barcode</th>
              <th>Reference Number</th>
              <th>Brand Name</th>
              <th>Model Name</th>
              <th>Unit Price</th>
            </tr>
          </thead>
        </table>

Примечание. Когда я раскомментирую "$ ('# viewTable'). Empty ();"Функция удалит мою thead (Datatable).

Спасибо!

Answer 1

Сначала сохраните объект dataTable в переменной,

var dataTable = $("#viewTable").DataTable();

Затем при успешном выполнении ajax используйте dataTable.add (["", "", ""]). Draw () , где dataTable - это имя переменной.

Для очистки таблицы данных используйте dataTable.clear ();

dataTable.clear().draw();

См. Код ниже;

success: function(result) {
  // store your data table object in a variable
  var dataTable = $("#viewTable").DataTable();
  /////////////////////////////////////////////
  dataTable.clear().draw();

  $.each(result, function(index, value) {
    console.log(value);

    // use data table row.add, then .draw for table refresh
    dataTable.row.Add([value.qr_code, value.reference_no, value.brand_name, value.model_name, value.unitPrice]).draw();
  });
}

Answer 2

Так что я не уверен, что вы используете плагин DataTable jQuery, найденный здесь: https://datatables.net/

Это выглядит почти так, как вы.Мне нравится этот плагин, и если вы не используете его, я определенно рекомендую вам использовать его.Это отличный инструмент.Это позволяет мне избегать использования .each и .append, так как плагин обрабатывает итерации для меня.

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

// our html modal will have an id of mymodal
// wait for page to load
$(document).ready(()=> {
    // pretending that we have a form and you are searching by that...
    let refnum = $("#refnum").val()
    $("#dataform").submit((event)=> {
        $.get("data.php?referencenumber=" + encodeURIComponent(refnum), (data)=> {
            console.log(data)
            $("#viewTable").DataTable({
                destroy: true // allows for table to be reloaded with new data SUPER IMPORTANT!
                data: data,
                columns: [
                    // data tables iterating through the data for you
                    {'data': 'barcode'},
                    {'data': 'referencenumber'},
                    {'data': 'brandname'},
                    {'data': 'modelname'},
                    {'data': 'unitprice'},
                ]
            });
            // display hidden modal with data table. You will need to adjust the size of the modal according to how you see fit in CSS.
       $("#mymodal").slideDown(300);
        });
       event.preventDefault();
    });
});

Надеюсь, это поможет вам.

Answer 3

Добавьте <tbody> тег к вам HTML код, как показано ниже,

 <table id="viewTable" class="table table-striped">
      <thead>
        <tr>
          <th>Barcode</th>
          <th>Reference Number</th>
          <th>Brand Name</th>
          <th>Model Name</th>
          <th>Unit Price</th>
        </tr>
      </thead>
      <tbody></tbody> <!-- New line -->
    </table>

Затем добавьте к tbody напрямую,

     $('#viewTable > tbody').append(
             '<tr>' +
                '<td>' + value.qr_code + '</td>' +
                '<td>' + value.reference_no + '</td>' +
                '<td>' + value.brand_name + '</td>' +
                '<td>' + value.model_name + '</td>' +
                '<td>' + value.unitPrice + '</td>' +
             '</tr>' +
       )