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

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>