AJAX 数据返回但引导表未填充

Question

我正在关注https://examples.bootstrap-table.com/index.html?bootstrap3#options/table-ajax.html 中的引导表示例，并确保我的数据返回的数据与示例 (https://examples.wenzhixin.net.cn/examples/bootstrap_table/data) 匹配。

我有点即兴发挥，因为我有一些表单字段，我想在执行 ajax 调用时使用这些表单字段来创建查询字符串。我可以从我的服务器日志中看到，当我 console.log 结果看起来正确时，ajax url 更新正确。但是，我的引导表显示“未找到匹配记录”而不是填充表。

我的代码：

<div id="toolbar">
  <div class="form-inline" role="form">
    <div class="form-group">
      <span>Type: </span>
      <select name="type" id="type" class="form-control">
        <option value="local">Local</option>US</option>
        <option value="tollfree">Toll-Free</option>
      </select>
    </div>
    <div class="form-group">
      <span>Country: </span>
      <select name="country" id="country" class="form-control">
        <option value="US" selected>US</option>
      </select>
    </div>
    <div class="form-group">
      <span>State: </span>
      <select name="state" id="state" class="form-control">
        {foreach $states as $state}
        <option value="{$state}">{$state}</option>
        {/foreach}
      </select>
    </div>
    <div class="form-group">
      <input name="area_code" id="area_code" class="form-control" type="text" placeholder="Area Code">
    </div>
    <div class="form-group">
      <input name="contains" id="contains" class="form-control" type="text" placeholder="Contains">
    </div>
    <button id="ok" type="submit" class="btn btn-primary">OK</button>
  </div>
</div>
</div>

<hr>
<div class="container">
<table
  id="table"
  data-toggle="table"
  data-height="640"
  data-click-to-select="true"
  data-search="true"
  data-show-refresh="true"
  data-ajax="ajaxRequest">
  <thead>
    <tr>
      <th data-checkbox="true"></th>
      <th data-field="number" data-sortable="true">Phone Number</th>
      <th data-field="sms" data-sortable="true" data-formatter="featureFormatter">SMS</th>
      <th data-field="voice" data-sortable="true" data-formatter="featureFormatter">Voice</th>
      <th data-field="fax" data-sortable="true" data-formatter="featureFormatter">Fax</th>
      <th data-field="vendor" data-sortable="true">Vendor</th>
      <th data-field="setup_cost"data-sortable="true">Setup</th>
      <th data-field="monthly_cost"data-sortable="true">Monthly</th>
    </tr>
  </thead>
</table>

<script>
  var $table = $('#table')
  var $ok = $('#ok')
  var url = 'https://example-domain.com/getMyData.php';

  $(function() {
    $ok.click(function () {
      $table.bootstrapTable('refresh');
    })
  })

  function ajaxRequest(params) {
    console.log(params);
    var opts = {
      type: $('#type').val(),
      country: $('#country').val(),
      state: $('#state').val(),
      area_code: $('#area_code').val(),
      contains: $('#contains').val()
    };
    $.get(url + '?' + $.param( opts )).then(function (res) {
      console.log(res);
      params.success(res)
    })
  }

  function featureFormatter(value, row) {
      var icon = value === true ? 'fa-check-circle' : 'fa-times-circle';
      var color = value === true ? 'green' : 'red';
      return '<span style="color:' + color + ';"><i class="fad ' + icon + '"></i></span>';
  }

</script>

我的 ajax 调用结果（修剪）：

{"total":2,"totalNotFiltered":2,"rows":[{"vendor":"Vendor A","number":"(928) 493-1999","sms":true,"voice":true,"fax":true,"setup_cost":"0.00","monthly_cost":"1.00"},{"vendor":"Vendor B","number":"(352) 657-1708","sms":true,"voice":true,"fax":true,"setup_cost":"1.00000","monthly_cost":"1.00000"}]}

非常感谢您在尝试填充此数据方面的任何帮助！

Answer 1

我发现了另一个类似问题的帖子：bootstrap-table (wenzhixin) --> Data by Ajax

该帖子中的链接不再有效，但我使用了答案中的示例并且能够使我的代码正常工作。

<script>
  var $table = $('#table')
  var $ok = $('#ok')
  var url = 'https://example-domain.com/getMyData.php';

  $(function() {
    $ok.click(function () {
      $table.bootstrapTable('refresh');
    })
  })

  function ajaxRequest(params) {
    params.data["type"] = $('#type').val();
    params.data["country"] = $('#country').val();
    params.data["state"] = $('#state').val();
    params.data["area_code"] = $('#area_code').val();
    params.data["contains"] = $('#contains').val();

    $.ajax({
        type: "POST",
        url: url + '?' + $.param(params.data),
        dataType: "json",
        success: function (data) {
            params.success({
                "rows": data.rows,
                "total": data.total
            })
        },
        error: function (er) {
            params.error(er);
        }
    });
  }

  function featureFormatter(value, row) {
      var icon = value === true ? 'fa-check-circle' : 'fa-times-circle';
      var color = value === true ? 'green' : 'red';
      return '<span style="color:' + color + ';"><i class="fad ' + icon + '"></i></span>';
  }

</script>