this is my plunk. What I'm trying to do is when user click on row, he will see form on the bottom of page and could correct it. With using jquery .html() I've rendered lower table but how could I set input form for that?
this is my code:
$(function () {
$("#button").click(function () {
$('#table').bootstrapTable('refreshOptions', {
data: data,
detailView: false,
filterControl: true,
columns: [
{
field: 'name',
title: 'Name',
sortable: true,
editable: true,
filterControl: 'input'
}, {
field: 'stargazers_count',
title: 'Structure',
sortable: true,
editable: true,
filterControl: 'input'
}, {
field: 'forks_count',
title: 'Class',
sortable: true,
editable: true,
filterControl: 'input'
}, {
field: 'description',
title: 'Description',
sortable: true,
editable: true,
filterControl: 'input'
}
]
});
});
$('#table').bootstrapTable({
detailView: true,
formatNoMatches: function () {
return "This table is empty...";
},
onClickCell: function(field, value, row, $element) {
if (field == 'name') {
$element.parent('tr').find('>td>.detail-icon').click();
// NOTE: needs index to call to expandRow
var $tr = $element.parent('tr');
// NOTE: literally first google result: http://stackoverflow.com/questions/469883/how-to-find-the-index-of-a-row-in-a-table-using-jquery
var index = $("> tr", $('#table').find('> tbody')).index($tr);
$('#table').bootstrapTable('expandRow',index);
}
},
onExpandRow: function(index, row, $detail) {
// console.log(row)
$detail.html('<table></table>').find('table').bootstrapTable({
columns: [{
field: 'id',
title: 'id'
}, {
field: 'status',
title: 'stat'
}, {
field: 'date',
title: 'date'
}],
data: row.children,
// Simple contextual, assumes all entries have further nesting
// Just shows example of how you might differentiate some rows, though also remember row class and similar possible flags
});
}
});
});
$(function () {
var $result = $('#form');
$('#table').on('click-row.bs.table', function (e, row, $element) {
$('.success').removeClass('success');
$($element).addClass('success');
function getSelectedRow() {
var index = $('#table').find('tr.success').data('index');
return $('#table').bootstrapTable('getData')[index];
}
$result.html(
'<table border="0" align="left" style="padding: 10px; margin: 10px; font-size: 14px; color: #0f0f0f">' + '<h3>'+
'<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Name</td>' + '<td> </td>' + '<td>' + getSelectedRow().name + '</td>' + '</tr>' +
'<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Structure</td>' + '<td> </td>' + '<td>' + getSelectedRow().stargazers_count + '</td>'+ '</tr>'+
'<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Class</td>' + '<td> </td>' + '<td>' + getSelectedRow().forks_count + '</td>'+ '</tr>'+
'<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Description</td>' + '<td> </td>' + '<td>' + getSelectedRow().description + '</td>'+ '</tr>'+
'</h3>' + '</table>'
);
});
});
html
<body>
<h3>Click on row that to see results</h3>
<div id="toolbar">
<button id="button" class="btn-primary btn">Load Table</button>
</div>
<table id="table"
data-toolbar="#toolbar"
data-search="true"
data-editable="false"
data-show-refresh="false"
data-show-toggle="false"
data-show-columns="true"
data-show-export="true"
data-detail-view="true"
data-detail-formatter="detailFormatter"
data-minimum-count-columns="2"
data-id-field="text"
data-response-handler="responseHandler"
data-field="operate"
data-events="operateEvents"
data-formatter="operateFormatter"
data-filter-control="true"
data-unique-id="id">
</table>
<div id="form"></div>
</body>
$resultvariable with the HTML you want but you never append it to any part of the DOM.<div id="toolbar">div, then you shoud do something like:$("#toolbar").append($result)