时间戳

首页 > 解决方案 > 使用 ajax 将动态数据填充到下拉列中的问题

javascript - 使用 ajax 将动态数据填充到下拉列中的问题

问题描述

我正在尝试使用 jquery 和 ajax 动态填充并附加一个列 For Example:Id 和下面的列数据。

数据将通过 REST Web 服务填充。但是数据没有得到填充。

代码片段如下。

由于缺少来自 Web 服务的动态数据，粘贴的代码可能无法正常工作。

所以问题在于将数据填充/附加到标题的列中。

$(document).ready(function() {

  // DO GET
  $.ajax({
    type: "GET",
    url: "api/customer/all",
    success: function(result) {
      $.each(result, function(i, customer) {

        var customerRow = "<tr><td><input type='checkbox' name='record'></td><td>" +
          customer.id + "</td><td>" +
          customer.name.toUpperCase() + "</td><td>" +
          customer.age + "</td><td>" +
          customer.address.street + "</td><td>" +
          customer.address.postcode + "</td></tr>";

        $('#IdProof').append('<option value="' + customer.id + '">' + customer.age + '</option>');

        $('#customerTable tbody').append(customerRow);
      });

    },
    error: function(e) {
      alert("ERROR: ", e);
      console.log("ERROR: ", e);
    }
  });

  $('#select-all').click(function(event) {
    if (this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
        this.checked = true;
      });
    } else {
      $(':checkbox').each(function() {
        this.checked = false;
      });
    }
  });

  $('#reboot').click(function() {
    $('#customerTable').find('tr').each(function(i) {
      var row = $(this);
      if (row.find('input[type="checkbox"]').is(':checked')) {
        var $tds = $(this).find('td'),
          Id = $tds.eq(1).text(),
          name = $tds.eq(2).text(),
          age = $tds.eq(3).text();
        // do something with productId, product, Quantity
        alert('Row ' + (i + 1) + ':\nId: ' + Id +
          '\nname: ' + name +
          '\nage: ' + age);

      }
    });
  });

  $(function() {
    $("#inputFilter").on("keyup", function() {
      $("#select-all").hide();
      var value = $(this).val().toLowerCase();
      $("#customerTable > tbody > tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

      });
    });
  });
})
<!DOCTYPE HTML>

<html>

<head>
  <title>Spring Boot - DELETE-UPDATE AJAX Example</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="/js/jqueryScript.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="@{/css/main.css}" />
</head>

<body>
  <div class="container">
    <h2>Filter Table</h2>
    <div class="row col-md-7 ">
      <div style="margin-bottom: 20px; padding: 10px; background-color: green; color: white;">
        <p>
          Type some text to search the table for <strong>Id</strong>, <strong>Name</strong>,
          <strong>Age</strong>, <strong>Street</strong>, <strong>PostCode</strong>:
        </p>
        <input class="form-control" id="inputFilter" type="text" placeholder="Search.." />
      </div>
      <table id="customerTable" class="table table-bordered table-hover table-responsive ">
        <thead>
          <tr>
            <th><input type="checkbox" name="select-all" id="select-all" /></th>
            <th>
              <select name="IdProof" id="id" class="form-control">
                <option value="">Id</option>
              </select>
            </th>
            <th>
              <select name="Name" id="name" class="form-control">
                <option value="">Name</option>
              </select>
            </th>
            <th>
              <select name="Age" id="age" class="form-control">
                <option value="">Age</option>
              </select>
            </th>
            <th>
              <select name="Street" id="street" class="form-control">
                <option value="">Street</option>
              </select>
            </th>
            <th>
              <select name="Postcode" id="postcode" class="form-control">
                <option value="">Postcode</option>
              </select>
            </th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <button id="reboot">Reboot</button>
      <button id="logs">Logs</button>
    </div>
  </div>

</body>

</html>

标签： javascriptjqueryhtmlajaxdatatable

解决方案

尝试像这样修复您的代码。我认为问题在于你的连接。像这样进行所有连接

var customerRow = "<tr><td><input type='checkbox' name='record'></td><td>" +
  customer.id + "'</td><td>'" +
  customer.name.toUpperCase() + "'</td><td>'" +
  customer.age + "'</td><td>'" +
  customer.address.street + "'</td><td>'" +
  customer.address.postcode + "'</td></tr>'";

推荐阅读