为什么我的 table 在 ajax 调用后没有更新？

Question

我有一个 bootstrap-table.js table 基于 HTML table 从 MySQL 数据库构建。见代码：

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

正如您在最后一列中看到的那样，有一个用于删除该行的按钮。这会触发一个 ajax 脚本。

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

现在是我的问题。 ajax 操作被触发并执行良好，显示消息，但该行不会从 table 中删除，除非您刷新页面。

提前感谢您的帮助！

Answer 1

好的，解决了！感谢 univ 改变加载数据方式的动机，以及其他一些小问题。您可以在下面找到代码。

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>

为什么我的 table 在 ajax 调用后没有更新？

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

javascript

ajax

jquery

twitter-bootstrap

bootstrap-table