Question

我使用ajax表单来过滤表格中的数据。问题是当我尝试通过单击列标题单元格在过滤器后对数据进行排序时，将显示旧数据。例如，我有这样的表：

=========================================
| header1 | header2 | header3 | header4 |
=========================================
|  data11 |  data12 | data13  | data14  |
|  data21 |  data22 | data23  | data24  |
|  data31 |  data32 | data33  | data34  |
|  data41 |  data42 | data43  | data44  |
-----------------------------------------

我过滤数据并且我已经得到了这个：

=========================================
| header1 | header2 | header3 | header4 |
=========================================
|  data11 |  data12 | data13  | data14  |
|  data41 |  data42 | data43  | data44  |
-----------------------------------------

但是，当我点击header1对数据进行降序排序时，旧数据会显示出来：

=========================================
| header1 | header2 | header3 | header4 |
=========================================
|  data41 |  data42 | data43  | data44  |
|  data31 |  data32 | data33  | data34  |
|  data21 |  data22 | data23  | data24  |
|  data11 |  data12 | data13  | data14  |
-----------------------------------------

我已经尝试了很多方法来解决这个问题。在我的OnComplete操作中，我尝试使用

重新初始化数据表

$('#data').dataTable().fnDestroy()
$('#data').dataTable({myoptions})

或重绘：

var myTable = $("#data").dataTable({ bRetrieve: true });
myTable.fnDraw();

但没有任何作用。

我非常感谢您提供的任何帮助。

更新：我使用的一些代码：用于更新表的表单

@using (Ajax.BeginForm(new AjaxOptions() { 
    LoadingElementId = "loading-bar", 
    UpdateTargetId = "assetsView", 
    Url = Url.Action("GetElementList"), 
    HttpMethod = "Get", 
    OnComplete = "OnComplete" 
}))
{
    <div class="editor-label">
        @Html.Label("Status", new { @class = "control-label col-md-2" })
    </div>

    <div class="editor-field">
        @Html.ListBoxFor(f => filters.AssetStatusID, ViewBag.AssetStatusID as MultiSelectList, new { @class = "chosen-select", data_placeholder = "Status", Multiple = "multiple" })
        @Html.ValidationMessageFor(f => filters.AssetStatusID)
    </div>

    <input type="submit" value="Zastosuj" class="btn btn-grey" />
    <a href="#" class="btn btn-grey">Anuluj</a>
}

使用Javascript：

$(document).ready(function () {
    var oTable = $('#data').dataTable({
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": true,
        "bInfo": false,
        "bAutoWidth": false
        //"aoColumnDefs": [
        //    { 'bSortable': false, 'aTargets': [6] }
        //]
    });
    oTable.fnSort([[1, 'asc']]);
    oFH = new FixedHeader(oTable, {
        "offsetTop": 131
    });
});

function OnComplete(request, status) {
    var table = $("#data").dataTable({ bRetrieve: true });
    table.fnDraw();
    oFH.fnUpdate();
}

HTML（带表格的片段）：

<div class="table">
<table id="data" class="data-table table-fixed-header">
    <thead class="header">
        <tr>
            <th>Id</th>
            <th>
                @Html.DisplayNameFor(model => model.ITNumber)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AssetTypeID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ManufacturerID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Model)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SAPNumber)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.UserEmployeeID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.City.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.LocalizationID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.StatusID)
            </th>
        </tr>
    </thead>
    <tbody id="assetsView">
        @Html.Action("GetElementList", new { filters = filters })
    </tbody>
</table>
</div>

GetElementsList函数：

public override ActionResult GetElementList(AssetFilter filters)
    {
        //some filtering stuff

        return PartialView("_AssetsView", assets.OrderBy(a => a.ITNumber).ToList());
    }

ajax表更新后无法刷新DataTables

0 个答案: