删除记录/数据后如何重新加载数据表？

Posted 2023-05-07

【中文标题】删除记录/数据后如何重新加载数据表？

【英文标题】：How to reload dataTable after deleting records/data?

【发布时间】：2017-03-30 08:35:54

【问题描述】：

我已经生成了记录，每一行都有删除按钮，当我点击删除按钮时，它会从数据库中删除记录。此外，删除后它将重新加载数据表。有什么帮助吗？

数据表：

var table = $('#table').DataTable(

    "processing": true,

     //some settings?
);

jQuery:

$(document).on('click', '[id^="delete-product-"]', function() 

    var id = this.id.split('-').pop();

    $.ajax(
        type: 'post',
        url: 'my_controller/delete_product',
        dataType: 'json',
        data: id: id,
        success: function(callback)
        
            //What should I code here, that can't reload entire page, only the table 
            //after deleting records
        ,
        error: function(status)
        
            console.log(status);
        
    );
);

任何帮助将不胜感激。提前谢谢你

【参考方案1】：

您不必重新加载整个表数据，只需删除已删除的行即可。

$(document).on('click', '[id^="delete-product-"]', function() 
    var $button = $(this);
    var id = this.id.split('-').pop();
    var table = $('#table_id_selector').DataTable(); // replace with your table id 
    selector
    $.ajax(
        type: 'post',
        url: 'my_controller/delete_product',
        dataType: 'json',
        data: id: id,
        success: function(callback)
        
            table.row( $button.parents('tr') ).remove().draw();
        ,
        error: function(status)
        
            console.log(status);
        
    );
);

【讨论】：

太棒了。它现在正在工作，非常感谢你，兄弟，

跟进问题兄弟，关于编辑？应该重新加载整个页面？或者你能给我一些想法吗？

@MarkyOnyab 很棒。如果您通过在旁边打一个绿色勾号来接受我的回答，将不胜感激。关于编辑，这不仅仅是删除。可以通过用文本框替换每个表格单元格来完成简单的输入框，然后在更新完成后将它们替换回文本。但是复杂的输入类型，如日期选择器、下拉列表、富文本字段，最好不要显示在表格中，您需要单独的页面进行编辑。如果您将来需要一些详细的编辑，我建议单独的页面。但是，如果您需要编辑多条记录的速度，但需要进行微小的更改，那么您需要在表格中进行。

在我回答的开头，点击左侧的空勾使其变为绿色

关于这个先生@Ergec ***.com/questions/40628994/shorthand-for-ajax-code