CODEWITHSUNDEEP
jquery
Cesar Bielich
Cesar Bielich

Reputation: 4945

wait till bootstrapTable is fully loaded before doing something

I have a javascript based bootstrapTable that dynamically generates the table and data.

I am having an issue trying to apply some CSS styling and classes to some of the td's that are being generated in this question. I have realized that I think my problem is that the table is not fully loaded which is causing my code not to work. It works fine if I manually write the table code, but not dynamically.

I tried using the load event to wait for the table to load but that seems to not work

$table.load(function() {
// do something
});

What jquery do I need to in order to wait for $table to be fully loaded before I do something?

javascript table

var $table = $('#table-javascript').bootstrapTable({
    method: 'get',
    url: 'bootstrap_database.php',
    height: 3849,
    cache: false,
    striped: true,
    pagination: true,
    search: true,
    pageSize: 100,
    pageList: [100, 200, 600, 1000],
    minimumCountColumns: 2,
    clickToSelect: true,
    columns: [{
        field: 'ID',
        title: 'ID',
        align: 'center',
        visible: false
    },{
        field: 'backlink',
        title: 'Backlink',
        align: 'left',
        width: '20'
    },{
        field: 'indexed',
        title: 'PI',
        align: 'center',
        width: '20',
    },{
        field: 'dindexed',
        title: 'DI',
        align: 'center',
        width: '20',
    },{
        field: 'moz',
        title: 'MOZ',
        align: 'center',
        width: '20',
    },{
        field: 'email',
        title: 'EM',
        align: 'center',
        width: '20'
    },{
        field: 'social',
        title: 'SOC+',
        align: 'center',
        width: '20'
    },{
        field: 'whois',
        title: 'WHO',
        align: 'center',
        width: '20'
    },{
        field: 'notes',
        title: 'NT',
        align: 'center',
        width: '20'
    },{
        field: 'removed',
        title: 'RM',
        align: 'center',
        width: '20'
    },{
        field: 'import_label',
        title: 'SR',
        align: 'center',
        width: '20'
    },{
        field: 'important',
        title: 'IM',
        align: 'center',
        width: '20'
    },{
        field: 'refresh',
        title: 'RF',
        align: 'center',
        width: '20',
        class: 'refreshstats'
    },{
        field: 'exempt',
        title: 'EX',
        align: 'center',
        width: '20',
    },{
        field: 'spammy',
        title: 'SP',
        align: 'center',
        width: '20',
    }]
});

Upvotes: 10

Views: 30444

Answers (5)

Radostin Stoyanov
Radostin Stoyanov

Reputation: 336

As previously mentioned the onLoadSuccess (load-success.bs.table) event will be triggered when the data is loaded successfully.

Alternatively the onPostBody (post-body.bs.table) event can be used. It will be triggered after the table body is rendered and available in the DOM.

A full list of events can be is available in events.md

Upvotes: 1

Carson
Carson

Reputation: 8038

Solution

There are two ways to achieve this.

  • One is to use the properties provided by BootstrapTable (the part in red in the image below) 
    $('#TableID').bootstrapTable({
     // ...
    onLoadSuccess: function() {
        // ...
  },
})
  • The other uses JS (the part in green in the image below)

JS

Focus on the green color

enter image description here

so you can try something like this

JS

const TABLE_ID = "myTable";
const table = $(`#${TABLE_ID}`)
table.on('load-success.bs.table', function (event, rowArray) { // I prefer to call ``data`` as ``rowArray``.
  // alert(JSON.stringify(rowArray));
})

// another example
table.on('click-cell.bs.table', function (event, field, value, row, td) {
  td = td[0]
  // ...
})

onClickCell | click-cell.bs.table (backup link)

HTML

<table id="myTable" class="table table-striped table-blue"
       data-toggle="table"
       data-search="true"
       data-search-highlight="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-show-export="true"
       data-minimum-count-columns="2"
       data-show-pagination-switch="true"
       data-pagination="true"
       data-id-field="id"
       data-page-list="[10, 25, 50, 100, ALL]"
       data-show-footer="false"
       data-side-pagination="client"
       data-export-types='["csv", "json", "excel", "doc", "sql", "png"]'
       data-editable = '[false, true, false, false]'
       data-export-options='{
        "fileName": "products"
        }'
       data-url="https://jsonplaceholder.typicode.com/photos">
  <thead>
  <tr>
    <th data-sortable="true" data-field="id">Id</th>
    <th data-sortable="true" data-field="title">Title</th>
    <th data-sortable="true" data-field="url">URL</th>
    <th data-sortable="true" data-formatter="imageFormatter" data-field="thumbnailUrl">Thumbnail URL</th>
  </tr>
  </thead>
</table>

Doc

Please refer to the useful documents

https://bootstrap-table.com/docs/api/events/#onloadsuccess

If the link not working in the future, then please refer to

wenzhixin/bootstrap-table/gh-pages/0cee7c935/docs/api/events

Upvotes: 0

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107546

There are many events you can override:

    onAll: function (name, args) {
        return false;
    },
    onClickRow: function (item, $element) {
        return false;
    },
    onDblClickRow: function (item, $element) {
        return false;
    },
    onSort: function (name, order) {
        return false;
    },
    onCheck: function (row) {
        return false;
    },
    onUncheck: function (row) {
        return false;
    },
    onCheckAll: function () {
        return false;
    },
    onUncheckAll: function () {
        return false;
    },
    onLoadSuccess: function (data) {
        return false;
    },
    onLoadError: function (status) {
        return false;
    },
    onColumnSwitch: function (field, checked) {
        return false;
    },
    onPageChange: function (number, size) {
        return false;
    },
    onSearch: function (text) {
        return false;
    },
    onToggle: function (cardView) {
        return false;
    },
    onPreBody: function (data) {
        return false;
    },
    onPostBody: function () {
        return false;
    },
    onPostHeader: function () {
        return false;
    },
    onPreRows: function () {
        return false;
    },
    onPostRows: function () {
        return false;
    }

Knowing nothing about how this plugin works, I would suggest trying the onLoadSuccess or onPostRows:

var $table = $('#table-javascript').bootstrapTable({
    method: 'get',
    ...
    onLoadSuccess: function() {
        // do something
    },
    ...
 });

Upvotes: 8

Jack
Jack

Reputation: 8941

Looking at the docs there is a onLoadSuccess event that fires after the data successfully loads.

var $table = $('#table-javascript').bootstrapTable({
    method: 'get',
    url: 'bootstrap_database.php',
    height: 3849,
    cache: false,
    striped: true,
    pagination: true,
    search: true,
    pageSize: 100,
    pageList: [100, 200, 600, 1000],
    minimumCountColumns: 2,
    clickToSelect: true,
    onLoadSuccess: function(){
      //do something after data has loaded
    },
    ....

Upvotes: 2

AmmarCSE
AmmarCSE

Reputation: 30577

Try 

.on('all.bs.table', function (e, name, args) {
                console.log('load-success');
            })

Of course, before the on, have your bootstrapTable call like it was http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#table-events

Upvotes: 2

Related Questions