wait till bootstrapTable is fully loaded before doing something

Question

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',
    }]
});

Answer 1

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
    },
    ...
 });

Answer 2

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

Answer 3

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
    },
    ....

Answer 4

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

Answer 5

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

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