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',
}]
});
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
},
...
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With