Change JQuery Bootgrid URL Programmatically

I'm just trying out Jquery bootgrid and several other js grid scripts for my current assignment, so bare with me if this question is awkward. I need to know whether (and how) Jquery Bootgrid support changing the URL programmatically and refresh its rows with data from the new URL. My current script is as follows, I need to be able to change the URL at run time, depends on user's selection (source #1-#10) and refresh the contents dynamically. Thanks a million in advance for the help

var myrequestgrid = $("#myrequestgrid").bootgrid({
    caseSensitive: false,
    ajax: true,
    selection: true, // Enable row selection
      multiSelect: true, // Allow multiple rows to be selected
    url: "resource/myrequestdatafromsource1.php"})

Solution

In short you need to destroy existing bootgrid with $("#grid").bootgrid("destroy") and rebind the bootgrid inorder to change the url. Also, you need to change the dom of your table since, it uses the data attribute the data in row. Following example shows how you can implement the dynamic data from multiple 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);
    }
  });
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<select id="selectOption">
  <option value="https://dummyjson.com/products" , data-handel="product">Products</option>
  <option value="https://dummyjson.com/users" data-handel="user">Users</option>
</select>
<table id="grid-data" class="table table-condensed table-hover table-striped">
  <thead>
  </thead>
</table>