如何使用数据表将 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（数据表）。

谢谢！

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

希望对你有帮助。