刷新Jquery数据表而不进行页面刷新

时间:2015-02-16 10:29:37

标签: jquery json

我有一个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");
            }
        });

1 个答案:

答案 0 :(得分:0)

要刷新数据表而不使用页面重新加载

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