Why isn't my table updated after an ajax call?

Question

I have a bootstrap-table.js table based on a HTML table build up from a MySQL database. See code:

<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 &amp; 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>

As you can see in the last column there's a button to remove the row. This triggers an ajax script.

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) {
        var id = [row.id];
        if(confirm("Weet je zeker dat je deze stem wilt verwijderen?")){
        var $table = $(this).closest('table').attr('id');
               $.ajax({
                  type: 'POST',
                   url: 'functions.php?action=removeVote',
                   data: 'vote_id=' + id,
                   cache: false,
                   success: function () {
                        $($table).bootstrapTable('remove', {
                            field: 'id',
                            values: [row.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();
                   }
               });
        }
    }
};

Now my issue. The ajax action is triggered and performing well, the message is displayed, but the row is not removed from the table, unless you refresh the page.

Thanks for your help in advance!

Answer 1

OK, it's solved! Thanks to the motivation of univ to change the way of loading data, and some other small issues. Below you'll find the code.

JS

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

HTML

<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 &amp; 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>