0
There’s a repository on github, bootstrap-table-examples, which shows a dynamic and very interesting table to be reused. However, for lack of knowledge I could not understand the project 100%. However, there is a code snippet I was very interested and even looking on the internet I found nothing similar, which is how the table is built.
In the archive Welcome.html the table is being built by Jquery passing parameters to it. Follow the code:
var $table = $('#table'),
$remove = $('#remove'),
selections = [];
function initTable() {
$table.bootstrapTable({
height: getHeight(),
columns: [
[
{
field: 'state',
checkbox: true,
rowspan: 2,
align: 'center',
valign: 'middle'
}, {
title: 'Item ID',
field: 'id',
rowspan: 2,
align: 'center',
valign: 'middle',
sortable: true,
footerFormatter: totalTextFormatter
}, {
title: 'Item Detail',
colspan: 3,
align: 'center'
}
],
[
{
field: 'name',
title: 'Item Name',
sortable: true,
editable: true,
footerFormatter: totalNameFormatter,
align: 'center'
}, {
field: 'price',
title: 'Item Price',
sortable: true,
align: 'center',
editable: {
type: 'text',
title: 'Item Price',
validate: function (value) {
value = $.trim(value);
if (!value) {
return 'This field is required';
}
if (!/^\$/.test(value)) {
return 'This field needs to start width $.'
}
var data = $table.bootstrapTable('getData'),
index = $(this).parents('tr').data('index');
console.log(data[index]);
return '';
}
},
footerFormatter: totalPriceFormatter
}, {
field: 'operate',
title: 'Item Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
}
]
]
});
I would like to understand more of how this is done! And also, if possible, pass other links for me to check and study too from other sources! And, if possible, opine whether it is in fact more interesting to mount table in a dynamic way like this or to do even in html code!
Most grateful!
Thanks for helping! Sorry for the delay in giving feedback.
– Wesley Redfield