简而言之，你需要用$("#grid").bootgrid("destroy")销毁现有的bootgrid，然后重新绑定bootgrid来修改url。此外，您需要更改表的dom，因为它使用data attribute行中的数据。下面的例子展示了如何从多个API中实现动态数据。

$("#grid-data").find("thead").html(`<tr>
      <th data-column-id="id" data-type="numeric">ID</th>
      <th data-column-id="title">Title</th>
      <th data-column-id="price">Price</th>
    </tr>`);
bindBootGrid($("#selectOption").val(), productResponse);

function productResponse(response) {
  return {
    current: 1,
    rowCount: response.limit,
    rows: response.products,
    total: response.total
  };
}

function userResponse(response) {

  return {
    current: 1,
    rowCount: response.limit,
    rows: response.users,
    total: response.total
  };
}

$("#selectOption").off("change").on("change", function() {

  $("#grid-data").bootgrid("destroy");

  if ($(this).attr("data-handel") == "product") {
    $("#grid-data").find("thead").html(`<tr>
      <th data-column-id="id" data-type="numeric">ID</th>
      <th data-column-id="title">Title</th>
      <th data-column-id="price">Price</th>
    </tr>`);
    bindBootGrid($(this).val(), productResponse);
  } else {
    $("#grid-data").find("thead").html(`<tr>
      <th data-column-id="id" data-type="numeric">ID</th>
      <th data-column-id="firstName">First Name</th>
      <th data-column-id="lastName">Last Name</th>
    </tr>`);
    bindBootGrid($(this).val(), userResponse);
  }

});

function bindBootGrid(url, callback) {
  var grid = $("#grid-data").bootgrid({
    ajaxSettings: {
      method: "GET",
      cache: false
    },
    ajax: true,
    navigation: 0,
    url: url,
    responseHandler: function(response) {
      return callback(response);
    }
  });
}

个字符