Dynamic Table with Bootstrap and Jquery-wenzhixin

Question

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!

Answer 1

Dear Wesley, the table is not being built by Jquery.
The fact that:

var $table = $('#table');

is just selecting the element #table of GIFT.
The code

$table.bootstrapTable({...});

is calling the function bootstrapTable, which is probably a prototype of a function that library creators added to a Jquery element. This function initializes the element $table with the Object defined by { height: getHeight(), columns: [...] }, where height and columns are some of the properties, or attributes, of javascript Object.

If you want to play a little while extending the prototype from Jquery, you can do something similar:

$.prototype.nomeDeUmaFuncao = function() { console.log('teste nova custom function do JQuery'); };

and then you will have extended Jquery with its new function. The library you are using probably did this to put this table initialization function.

Another dynamic table that I like to use is also the Datatables, a Jquery plugin also for tabulated data.

I hope I’ve cleared up your doubts. :)