AJAX data returned but bootstrap-table not populating

Question

I'm following the bootstrap-table example found at https://examples.bootstrap-table.com/index.html?bootstrap3#options/table-ajax.html and I've made sure my data returned matches from the example (https://examples.wenzhixin.net.cn/examples/bootstrap_table/data).

I'm improvised a bit because I have some form fields that I want to use to create my query string when I do the ajax call. I can see from my server logs the ajax url updates correctly when I console.log the result it looks correct. However, my bootstrap-table displays "No matching records found" rather than populating the table.

My code:

<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>

My ajax call result (trimmed):

{"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"}]}

Any help in trying to get this data to populate is greatly appreciated!

Answer 1

I found another post with a similar issue: bootstrap-table (wenzhixin) --> Data by Ajax

The links in that post don't work anymore but I used the example in the answer and was able to get my code to work.

<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>