Laravel/Ajax：刷新table栈底新数据（旧数据保留）

Question

我正在使用 fetchcategory(); 以便在我尝试添加、编辑和删除数据时刷新我的 table。我的问题是，每次 table 尝试重新加载时，新更新的数据都会堆叠在 table 的底部。旧信息保留在原处。示例如下：

我的table有一条记录，第二张截图是我添加新数据后的结果。

如您所见，add_category 下的 else 条件触发。 else 下的最后一行代码是“fetchcategory();”。但是 fetch simple 在更新之前将整个新 table 添加到数据下方。我的编辑和删除功能也是如此。

我的问题是 table 为什么不只是重新加载整个东西并带走旧数据的显示？

此外，我想避免使用 location.reload()，因为我不想刷新整个网页，只刷新 table.

AJAX:

 $(document).ready(function (){

        fetchcategory();

      function fetchcategory() {
            $.ajax({
                type: "GET",
                url: "/clinical/bbr-category-configuration-data",
                dataType: "json",
                success: function (response){
                    $.each(response.all_categories, function (key, cat) {
                        $('tbody').append(`
                            <tr>
                                <td><p class="font-weight-bold mb-0">${cat.category_name}</p>${cat.category_description}</td>
                                <td>View:
                                    <mark class="mark-orange">${gettype(cat.config_view_type)}</mark>
                                    <br>Edit:
                                    <mark class="mark-orange">${gettype(cat.config_edit_type)}</mark>
                                </td>
                                <td>View:
                                    <mark class="mark-orange">${gettype(cat.bbrmode_view_type)}</mark>
                                </td>
                                <td>
                                    <button type="button" value="${cat.category_id}" class="edit_category btn btn-outline-secondary"><i class="fas fa-edit"></i> Edit</button>
                                    <button type="button" value="${cat.category_id}" class="delete_category btn btn-outline-secondary"><i class="fas fa-trash"></i> Delete</button>
                                </td>
                            </tr>`);
                    });

                    function gettype(type) {
                        var c_type = '';
                        if (type == 'P') {
                            c_type = 'Public'
                        } else if (type == 'R') {
                            c_type = 'Restricted'
                        } else if (type == undefined){
                            c_type = 'N/A'
                        }
                        return c_type;
                    }

                }
            });
        }

        $(document).on('click', '.delete_category', function (e) {
            e.preventDefault();
            //click this button(delete_category) to get the value(category_id)
            var cat_id = $(this).val(); 
            // alert(cat_id);
            $('#delete_cat_id').val(cat_id);
            $('#deleteCategoryModal').modal('show');
        });
        $(document).on('click', '.delete_category_btn', function (e) {
            e.preventDefault();
            var cat_id = $('#delete_cat_id').val();
            alert('Category Deleted!');
            $('#deleteCategoryModal').modal('hide'); 

            fetchcategory();

            //token taken from laravel documentation
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "DELETE",
                url: "/clinical/bbr-category-configuration-delete/"+cat_id,
                dataType: "dataType",
            });
        });

        $(document).on('click','.edit_category',function (e) {
            e.preventDefault();
            var cat_id = $(this).val();
            console.log(cat_id);
            $('#editCategoryModal').modal('show');
            $.ajax({
                type: "GET",
                url: "/clinical/bbr-category-configuration-edit/"+cat_id,
                success: function (response) {
                     console.log(response);
                    if(response.status == 404) {
                        $('#success_message').html("");
                        $('#success_message').addClass('alert alert-danger');
                        $('#success_message').text(response.message);
                    } else {
                        $('#edit_category_name').val(response.category_edit.category_name);
                        $('#edit_category_description').val(response.category_edit.category_description);
                        $('#edit_cat_id').val(response.category_edit.category_id);
                    }
                }
            });
        });

        $(document).on('click', '.update_category', function (e){
            e.preventDefault();
            var cat_id = $('#edit_cat_id').val();
            var update_data = {
                'category_name' : $('#edit_category_name').val(),
                'category_description' : $('#edit_category_description').val(),
            }

            //token taken from laravel documentation
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: "POST",
                url: "/clinical/bbr-category-configuration-update/"+cat_id,
                data: update_data,
                dataType: "json",
                success: function (response){
                    // console.log(response);
                    if(response.status == 400) {
                        $('#category_formCheckUpdate').html("");
                        $('#category_formCheckUpdate').addClass('alert alert-danger');
                        $.each(response.errors, function (key, err_values) {
                            $('#category_formCheckUpdate').append('<li>'+err_values+'</li>');
                        });
                    } else if(response.status == 404) {
                        $('#category_formCheckUpdate').html("");
                        $('#category_notif').addClass('alert alert-success');
                        $('#category_notif').text(response.message);
                    } else {
                        $('#category_formCheckUpdate').html("");
                        $('#category_notif').html("");
                        $('#category_notif').addClass('alert alert-success');
                        $('#category_notif').text(response.message);
                        $('#editCategoryModal').modal('hide');
                        fetchcategory();
                    }
                }
            });
        });

        $(document).on('click', '.add_category', function(e){
            e.preventDefault();
            var category_data = {
                'category_name': $('.category_name').val(),
                'category_description': $('.category_description').val(),
                'category_description': $('.category_description').val(),
                'config_view_type': $('.config_view_type').val(),
                'config_edit_type': $('.config_edit_type').val(),
                'bbrmode_view_type': $('.bbrmode_view_type').val(),
            }
            
            //token taken from laravel documentation
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "POST",
                url: "/clinical/bbr-category-configuration",
                data: category_data,
                dataType: "json",
                success: function (response){
                    console.log(response);
                if(response.status == 400) {
                    $('#category_formCheck').html("");
                    $('#category_formCheck').addClass('alert alert-danger');
                    $.each(response.errors, function (key, err_values) {
                        $('#category_formCheck').append('<li>'+err_values+'</li>');
                    });
                    }
                else  
                  {
                    $('#category_notif').html("");
                    $('#category_notif').addClass('alert alert-success');
                    $('#category_notif').text(response.message);
                    $('#createCategory').modal('hide');
                    fetchcategory();
                    }
                }
            });
        });
    });

Answer 1

您可以使用 $('tbody').html() 而不是 $('tbody').append( 来避免在底部追加，因此

function fetchcategory() {
        $.ajax({
            type: "GET",
            url: "/clinical/bbr-category-configuration-data",
            dataType: "json",
            success: function (response){
                var tbody="";
                $.each(response.all_categories, function (key, cat) {
                   tbody+=`
                            <tr>
                                <td><p class="font-weight-bold mb-0">${cat.category_name}</p>${cat.category_description}</td>
                                <td>View:
                                    <mark class="mark-orange">${gettype(cat.config_view_type)}</mark>
                                    <br>Edit:
                                    <mark class="mark-orange">${gettype(cat.config_edit_type)}</mark>
                                </td>
                                <td>View:
                                    <mark class="mark-orange">${gettype(cat.bbrmode_view_type)}</mark>
                                </td>
                                <td>
                                    <button type="button" value="${cat.category_id}" class="edit_category btn btn-outline-secondary"><i class="fas fa-edit"></i> Edit</button>
                                    <button type="button" value="${cat.category_id}" class="delete_category btn btn-outline-secondary"><i class="fas fa-trash"></i> Delete</button>
                                </td>
                            </tr>`;
                });

                $('tbody').html(tbody)
                    function gettype(type) {
                    var c_type = '';
                    if (type == 'P') {
                        c_type = 'Public'
                    } else if (type == 'R') {
                        c_type = 'Restricted'
                    } else if (type == undefined){
                        c_type = 'N/A'
                    }
                    return c_type;
                }

            }
        });
    }

Laravel/Ajax：刷新table栈底新数据（旧数据保留）

Laravel/Ajax: refreshing the table stacks the new data at the bottom (old data stays)

sql

ajax

crud

duplicates

laravel