好了,问题解决了!多亏了大学改变加载数据方式的动机,以及其他一些小问题。下面是代码。
function operateFormatter(value, row, index) {
return [
'<button class="btn btn-xs btn-danger voteremove"><i class="fa fa-trash"></i></button>'
].join('');
};
window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .edit': function (e, value, row, index) {
alert('You click edit icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .voteremove': function (e, value, row, index) {
if(confirm("Weet je zeker dat je deze stem wilt verwijderen?")){
var id = [row.id];
var formMessages = $('#messages');
var table = '#table2';
$.ajax({
type: 'POST',
url: 'functions.php?action=removeVote',
data: 'vote_id=' + id,
cache: false,
success: function () {
$(table).bootstrapTable('remove', {
field: 'id',
values: id
});
$(formMessages).removeClass('alert-danger');
$(formMessages).addClass('alert-success');
$(formMessages).text('succesvol verwijderd');
$(formMessages).show();
},
error: function(){
$(formMessages).removeClass('alert-success');
$(formMessages).addClass('alert-danger');
$(formMessages).text('er is een fout opgetreden!');
$(formMessages).show();
}
});
}
}
};
<table id="table2" class="table table-striped table-hover table-no-bordered"
data-toggle="table"
data-search="true"
data-pagination="true"
data-page-size="25"
data-show-refresh="true"
data-url="stemmen.php"
data-side-pagination="client"
data-unique-id="id"
> <thead>
<tr>
<th data-field="id" data-visible="false">ID</th>
<th data-field="timestamp">datum & tijd</th>
<th data-field="email">e-mailadres</th>
<th data-field="stem">stem</th>
<th data-formatter="operateFormatter" data-events="operateEvents"></th>
</tr>
</thead>
</table>