在不刷新页面的情况下刷新 Jquery 数据表答案

【问题标题】：Refresh Jquery datatable without do page refresh在不刷新页面的情况下刷新 Jquery 数据表
【发布时间】：2015-02-16 10:29:36
【问题描述】：

我有一个 jquery 数据表，它代表数据库表的值。我用 json 方法填充这个表行。

现在我从该数据表中删除一行意味着，所有数据表功能（如排序和过滤器）都不起作用。如果我刷新页面意味着它工作正常。我的猜测是删除的行没有在 DOM 中更新。我也尝试了 fndraw fndestroy 函数，但没有用..

请给出刷新数据表的任何解决方案。

谢谢我的代码是

function LoadOrderDetails() {

        $.ajax({
            type: "POST",
            url: "MyDataVer1.aspx/LoadOrderDetails",
            contentType: "application/json",
            dataType: "json",
            success: function(data) {
                $('#TblOrderDetails').find('tbody').remove();

                var TableHTML = "";
                TableHTML = TableHTML + "<tbody>";
                for (var i = 0; i < data.d.length; i++) {
                    if (i % 2 == 0) {
                        // do if even
                        TableHTML = TableHTML + "<tr id='GVDRow" + i + "' class='odd'>";
                    }
                    else {
                        // do if not
                        TableHTML = TableHTML + "<tr id='GVDRow" + i + "' class='even'>";
                    }

                    //TableHTML = TableHTML + "<tr id='GVDRow" + i + "'>";
                    TableHTML = TableHTML + "<td id='Sno'>";
                    TableHTML = TableHTML + data.d[i].Sno;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td id='Date'>";
                    TableHTML = TableHTML + data.d[i].Date;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td id='BadgeID'>";
                    TableHTML = TableHTML + data.d[i].BadgeID;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td id='ConsultantName'>";
                    TableHTML = TableHTML + data.d[i].ConsultantName;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td id='ManagerName'>";
                    TableHTML = TableHTML + data.d[i].ManagerName;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td id='GeoGraphy'>";
                    TableHTML = TableHTML + data.d[i].GeoGraphy;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td id='Country'>";
                    TableHTML = TableHTML + data.d[i].Country;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td id='Segment'>";
                    TableHTML = TableHTML + data.d[i].Segment;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td id='SubSegment'>";
                    TableHTML = TableHTML + data.d[i].SubSegment;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td id='OrderType'>";
                    TableHTML = TableHTML + data.d[i].OrderType;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td id='CaseNumber'>";
                    TableHTML = TableHTML + data.d[i].CaseNumber;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td id='OrderNumber'>";
                    TableHTML = TableHTML + data.d[i].OrderNumber;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td id='OrderStatus'>";
                    TableHTML = TableHTML + data.d[i].OrderStatus;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td id='Reason'>";
                    TableHTML = TableHTML + data.d[i].Reason;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td id='Comments'>";
                    TableHTML = TableHTML + data.d[i].Comments;
                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td>";
                    TableHTML = TableHTML + "<input id='btnEdit" + i + "' type='image' style='border-width:0px;'   onclick='javascript:return FnEditOrder(" + data.d[i].AutoID + "," + i + ");'  src='images/editicon.gif' class='btnedit' ></input>";


                    TableHTML = TableHTML + "</td>";
                    TableHTML = TableHTML + "<td>";
                    TableHTML = TableHTML + "<input id='btnDelete" + i + "' type='image' style='border-width:0px;' onclick='javascript:return FnDeleteOrder(" + data.d[i].AutoID + ");' src='images/Delete_Img.png' ></input>";

                    TableHTML = TableHTML + "</td></tr>";

                }
                TableHTML = TableHTML + "</tbody>";




                var oTable = $('#TblOrderDetails').DataTable();
                oTable.fnClearTable();
                oTable.fnDraw();
                ('#TblOrderDetails').DataTable();
            },
            error: function() {
                alert("Failed to load order status");
            }
        });

【问题讨论】：

TableHTML += "<tbody>" 会为您节省大量字符 :)
如果您手动构建整个表格，为什么还要使用 DataTables？此类插件的目的正是根据您提供的 JSON 自动构建整个表。我的猜测是您应该更好地阅读文档并以正确的方式进行操作：datatables.net/examples/ajax/objects.html
nice Jeremy...我更改了代码..但是删除一行后我需要重新加载数据表。任何解决方案
API 有一个 row().remove() 方法，它不应该破坏表格功能：datatables.net/reference/api/row().remove()

标签： jquery json

【解决方案1】：

在不重新加载页面的情况下刷新数据表使用

var oTable = $('#TblOrderDetails').DataTable();
oTable.draw();

【讨论】：