Wait for bootstrapTable to fully boot before doing anything.

Question

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

I had a problem trying to apply CSS style and classes to some tdthat are generated in this question . I realized that, in my opinion, my problem is that the table is not fully loaded, which leads to the fact that my code does not work. It works fine if I manually write the table code, but not dynamically.

I tried using the event loadto wait for the table to load, but it doesn't seem to work

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

What kind of jquery do I need to wait for it to $tablebe fully loaded before doing anything?

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

, :

    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;
    }

, , onLoadSuccess onPostRows:

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

Answer 2

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

, , , bootstrapTable, http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#table-events

Answer 3

onLoadSuccess, .

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

, onLoadSuccess (load-success.bs.table) , .

onPostBody (post-body.bs.table). , DOM.

A full list of events can be accessed in the /docs/_i18n/en/Documentation/events.md download table.

Answer 5

I have an application that uses a boot table and I want to sort it by id. Can I add an order in this way?

$('#example').bootstrapTable({
  method: 'get',
  data: datosSolicitudes,
  cache: false,
  height: 500,
  striped: true,
  pagination: true,
  pageSize: 10,
  pageList: [10, 25, 50, 100, 200],
  search: true,
  showColumns: true,
  showRefresh: false,
  showToggle: true,
  minimumCountColumns: 2,
  clickToSelect: true,
  order: [
    ['IdSolicitudFactura', "desc"]
  ], //order it this way
  toolbar: FormatoToolbar(),
  columns: [{
      field: 'IdSolicitudFactura',
      title: 'Id',
      align: 'right',
      valign: 'middle',
      sortable: true,
      visible: true,
      switchable: false
    }, {
      field: 'FechaSolicitud',
      title: 'Fecha Solicitud',
      align: 'center',
      valign: 'middle',
      sortable: true
    },
    {
      field: 'operate',
      title: 'Operaciones',
      align: 'center',
      valign: 'middle',
      clickToSelect: false,
      formatter: FormatoIconosOperaciones,
      events: EventoIconoOperacion
    }
  ]
});