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

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),
          });
        }
      });
    }
  });
});