Question

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

<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操作被触发并且运行良好，将显示该消息，但除非您刷新页面，否则不会从表中删除该行。

提前感谢您的帮助！

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>

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

1 个答案: