在 AJAX 上刷新 Gridjs 表成功

Question

AJAX 代码工作正常并创建我想要的输出并“成功”

success: function (data) {
console.log(data);     
     $( "#gridjs_table" ).load(window.location.href + " #gridjs_table" );//updates the gridjs_table div
}

Gridjs 表也可以正常工作

<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
<link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet"/>
<div id="gridjs_table">

<div id="wrapper"></div>
<script>
new gridjs.Grid({
    columns: [
        { name: "Title",
            formatter: (cell, row) => {
            return gridjs.html(`<span style='text-align: center;' id='visible_title'>${row.cells[0].data}</span>`);
        
        }},
        { name: "src", hidden: true},
        { name: "Cover", 
            sort:{enabled: false},
            formatter: (cell, row) => {
            return gridjs.html(`<div style='text-align: center;'><img id="cover" src="../library/${row.cells[1].data}" alt="no"></div>`);
        }
        },
        { name: "Link", sort:{enabled: false},
            formatter: (cell, row) => {
            return gridjs.html(`<div id='link_format'><span id='visible_link'>${row.cells[3].data}</span><br><a href='${row.cells[3].data}' target='_blank'><div id='visit'>Visit</div></a></div>`);
        }},
        { name: "Status"},
        { name: "Views"},
        { name: "Stars" },
        { name: "Bookmarked"},
        { name: "Action",
            sort:{enabled: false},
            formatter: (cell, row) => {
            return gridjs.html(`<a href='edit.php?file=${row.cells[2].data}' onclick="window.open('edit.php?file=${row.cells[2].data}', 
                            'newwindow', 
                            'width=300,height=250'); 
                return false;"><div id='edit'>Edit</div></a>
                
                
                    <a href='../library/view.php?view=${row.cells[2].data}' onclick="window.open('../library/view.php?view=${row.cells[2].data}', 
                                'newwindow', 
                                'width=320,height=580'); 
                    return false;" target='_blank'><div id='mobile'>Mobile</div></a>
                `);
            }
        }
],
    data: [
    <?php
        echo $data_implode;
        ?>
],
sort: true,
search: {
    enabled: true,
    debounceTimeout: 500,

},
style: {
    table: {
        border: '3px solid #ccc',
    },
},
fixedHeader: true,
pagination: {
    enabled: true,
    limit: 3
}

}).render(document.getElementById("wrapper"));
</script>
</div>
</div> 

成功后，ajax 应该刷新表格，但它不起作用。它只是一片空白，没有显示，整个桌子都消失了。刷新整个页面可以工作并显示新添加的项目，但我不希望这样。

Answer 1

刷新保持桌子的 div 不起作用，所以我最终使用了这段代码并且它起作用了。

$('body').load('dashboard.php');

Answer 2

我有类似的问题，根据用户选择的数据填充网格，例如在选择多个中。调用重新创建网格并渲染到 div 的函数，它会在包装器网格中重复相同的 insideHTML，即使在控制台中探索生成的网格并具有新内容时，它也会显示旧行，重复第一次渲染。 我发现的唯一方法是删除包装器 div，以编程方式创建一个新的包装器 div，然后将网格渲染到新创建的 div。

function create_new_grid(data){
    document.getElementById('wraqpper').remove();
    var div = document.createElement("div");
    div.id = "wraaper";
    document.appendChild(div)
    grid = new gridjs.Grid({data:data
    }).render(document.getElementById("wrapper"));
}