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（数据表）。

谢谢！

Answer 1

首先将dataTable对象存储在变量中，

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

然后在ajax成功use dataTable.add([" "," ", " "]).draw()上执行，其中dataTable是变量名。

要清除数据表use 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

将<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>' +
       )

Answer 3

因此，我不确定您是否正在使用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();
    });
});

希望对您有帮助。

如何以数据表的形式附加ajax结果

3 个答案: