How to use url: instead of data: for onExpandRow function? - bootstrap-table

Question

I followed the example for onExpandRow, however I can't figure out how to use the row information that is passed with a url for my table instead of the data tag. Currently it just replicates my whole table in the expand function, not just the rows data. Probably a simple fix but I am missing it.
onExpandRow: function (index, row, $detail) {
console.log(row)
$detail.html('<table></table>').find('table').bootstrapTable({
url: 'table.php',
columns:[{
field: 'mfr_name',
title: 'manufacturer'},
{field: 'phone_number',
title: 'phone'},
],
})
The example has the data saved in a variable and uses the data: call instead of the url: one.
var data = [{
'col1': '1.1',
'col2': '1.2',
'nested': [{
'col3': '1.3',
'col4': '1.4',
'col5': '1.5'
}]
onExpandRow: function(index, row, $detail) {
console.log(row)
$detail.html('<table></table>').find('table').bootstrapTable({
clickToSelect: true,
columns: [{
field: 'select',
checkbox: true
}, {
field: 'col3',
title: 'Col3'
}, {
field: 'col4',
title: 'Col4'
}, {
field: 'col5',
title: 'Col5'
}],
data: row.nested,

Answer 1

Did you mean something like this:
http://jsfiddle.net/eitanmg/m41ok0ue/12/
The main change is when expanding the row, it will make AJAX call to get the data you want from remote resource and not from local variable.
$(function () {
$('#table').bootstrapTable({
data: data,
detailView:true,
onExpandRow: function (index, row, $detail) {
$detail.html('Loading request...');
$.ajax({
type: "GET",
url: "/your_custom_url_that_contains_the_data",
success: function (result) {
$detail.html('<table></table>').find('table').bootstrapTable({
columns: [{
field: 'select',
checkbox: true
}, {
field: 'col1',
title: 'Col1'
}, {
field: 'col2',
title: 'Col2'
}, {
field: 'col3',
title: 'Col3'
}],
data: JSON.parse(result),
});
}
});
}
});
});