爲什麼我的表沒有在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>