Dynamic Table with Bootstrap and JQuery- wenzhixin

Navigation
0

There is a repository in github, bootstrap-table-examples , which shows a very interesting and dynamic table of be reused. However, for lack of knowledge I could not understand the 100% project. However, it has a code snippet I was very interested and even looking on the internet I did not find anything similar, that is how the table is built.

In the welcome.html file the table is being built by JQuery passing parameters to it. Here is 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 so I can check and study from other sources too! And, if possible, consider whether it is in fact more interesting to build such a dynamic table or even do it in html code!

Very grateful!

    
asked by anonymous 14.03.2017 / 18:46

1 answer

1

Dear Wesley, the table is not being built by JQuery. The fact of doing: 

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

You are only selecting the #table element of the DOM. The code 

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

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

If you want to play around by extending JQuery's prototype , you can do something like this: 

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

Then you'll have extended JQuery with your new function. The library you're using probably did this to put this table's initialization function.

Another PivotTable I like to use is DataTables , a JQuery plugin for tabular data as well.

I hope to have clarified your doubts. :)

    
27.03.2017 / 00:58
load value in empty front form without starting with 0 [java] Thymeleaf + spring View PDF JSF primeFaces