How to change the data-source for a table on dropdown-list change - bootstrap-table

Question

I just can't find any examples that can help me. I have a drop-down list of customers and a table which displays services/products a customer provides. On page load the ddl is set to customer 0 and that customer's data is displayed in the table. I now need to changed the data-source and refresh the table when the drop-down is changed.
The main bits of my code are...
<div class="card-body">
<div class="row">
<div class="col-4">
<lable for="customerFilter" class="control-label">Customer Filter: </lable>
</div>
<div class="col-8">
<input id="customerFilter" class="form-control" />
</div>
</div>
<div id="toolbar">
<div class="alert alert-info">You can refine this list by entering an additional filter in the search box on the right. Any text you type will filter the list based on any of the fields containing the text typed.</div>
</div>
<div>
<table id="table"
data-classes="table table-hover table-condensed"
data-striped="true"
data-toolbar="#toolbar"
data-pagination="true"
data-click-to-select="true"
data-search="true"
data-show-export="true"
data-show-pagination-switch="true"
data-show-toggle="true"
data-show-columns="true"
data-url='#Url.Content("~/SSTCodes/GetSSTCodesByCustomer?CustomerID=0")'>
<thead>
<tr>
<th data-field="sstID" data-formatter="btnViewFormatter" data-sortable="true">ID</th>
<th data-field="sstRU" data-sortable="true" data-formatter="sstFormatter">Recoverability</th>
<th data-field="sstProductCode" data-sortable="true">Product Code</th>
<th data-field="sstProductName" data-sortable="true">Product Name</th>
<th data-field="sstStockLevel" data-formatter="lowStockFormatter">Stock Level</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script type="text/javascript">
cData = #Html.Raw(ViewData("Customers"));
$("#customerFilter").kendoComboBox({
dataTextField: "Text",
dataValueField: "Value",
change: customerFilterChanged,
dataSource: cData,
filter: 'contains'
});
function customerFilterChanged() {
// NEED TO CHANGE THE DATASOURCE Url
var customer = this.value()
var url = '#Url.Content("~/SSTCodes/GetSSTCodesByCustomer?CustomerID=")' + customer;
// NEED TO SET THIS AS THE TABLES data-url AND REFRESH THE DATASOURCE....
}
var $table = $('#table');
function btnViewFormatter(value) {
return '<a class="btn btn-primary btn-sm" href="#Url.Content("~/SSTCodes/Edit?id=")' + value + '">' + value + '</a>';
}
function sstFormatter(value) {
//Removed for clarity
Return value
}
function lowStockFormatter(value) {
//Removed for clarity
Return value
}
function getSelectedRow() {
var index = $table.find('tr.success').data('index');
return $table.bootstrapTable('getData')[index];
}
$(function () {
$table.bootstrapTable({
fixedColumns: true,
fixedNumber: 1,
exportDataType:"all",
exportTypes:['csv', 'txt', 'xlsx']
});
$table.on('click-row.bs.table', function (e, row, $element) {
$('.success').removeClass('success');
$($element).addClass('success');
});
$table.on('dbl-click-row.bs.table', function (e, row, $element) {
var url = '#Url.Content("~/SSTCodes/Edit?id=")' + getSelectedRow().sstID;
window.open(url, '_self');
})
});
</script>
The function customerFilterChanged is where I need help.

Answer 1

I have changed my approach...
The customerFilterChange function now just redirects the page
function customerFilterChanged() {
window.location.href = "#Url.Content("~/SSTCodes/Index?id=")" + this.value();
}
The controller has been amended so that it has an optional id...
Function Index(Optional id As Integer = 0) As ActionResult
If IsNothing(id) Then
ViewData("CustomerID") = 0
Else
ViewData("CustomerID") = id
End If
ViewData("Customers") = Newtonsoft.Json.JsonConvert.SerializeObject(CustomerModel.CustomerDDLList.GetAllCustomers())
Return View()
End Function
And the data-url value for the table is now
data-url='#Url.Content("~/SSTCodes/GetSSTCodesByCustomer?CustomerID=") + #ViewData("CustomerID")' >
Job done...