代码之家  ›  专栏  ›  技术社区  ›  Jan-Willem

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

  •  -1
  • Jan-Willem  · 技术社区  · 7 年前

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

    提前感谢您的帮助!

    1 回复  |  直到 7 年前
        1
  •  0
  •   Jan-Willem    7 年前

    好了,问题解决了!多亏了大学改变加载数据方式的动机,以及其他一些小问题。下面是代码。

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

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