jQuery Datatable不根据自定义属性进行排序

时间:2018-01-28 19:22:16

标签: jquery asp.net asp.net-mvc datatables

我有一个ASP.NET MVC应用程序,我在Razor视图中使用foreach循环填充HTML表。在前端,我在一个列上实现了排序功能(使用jQuery Datatable),该列具有除了我想要排序的整数之外的其他数据。

问题在于它不是基于整数值进行排序,而是随机排序。

根据其官方网站,jQuery Datatable在这种情况下通过以" data-order"的名称指定自定义属性来实现排序。然后为其分配积分值。不知何故,它不起作用。 我找到了很多解决方案,以防HTML表被Ajax调用返回的数据填满,但在我的情况下,它是通过MVC Razor引擎。 我错过了什么吗?

这是cshtml文件中的代码。我想通过Count Column对它进行排序: -

<table datatable="full" datatable-filter-text="Filter by Customer:">
    <thead>
        <tr>
            <th no-sort>
                @if (Model.Documents.Any())
                { 
                    <input select-all type="checkbox" />
                }
            </th>
            <th class="nowrap">
                Document Number
            </th>
            <th>
                Customer
            </th>
            <th>
                Count
            </th>
            <th>
                Created
            </th>
        </tr>
    </thead>
    <tbody>
    @foreach (var doc in Model.Documents)
    {
        <tr>
            <td>
                <input type="checkbox" name="SelectedIds" value="@doc.Id" />
            </td>
            <td>
                <a href="@Url.Detail(doc.Id)">
                    @doc.Number</a>
            </td>
            <td>
                @doc.Customer
            </td>
            <td data-order="@doc.Count">
                @doc.Count
                <a href="#" class="ui-icon ui-icon-info"  style="float:left"
                   title="Count" 
                   ui-qtip-ajax 
                   ui-qtip-position-at="top center" 
                   ui-qtip-position-my="bottom center" 
                   rel="@Url.Action("GetCount",
                       new
                       {
                           id = doc.Id,
                           Code = Model.Code
                       })" >
                </a>
                <div class="invisible">
                    @{ Html.RenderAction("GetCount",
                     new
                     {
                         id = doc.Id,
                         Code = Model.Code,
                         DisplayPlainText = true
                     });}
                </div>
            </td>
            <td>
                @doc.CreatedDate
            </td>
        </tr>
    }
    </tbody>
</table>

以下是在Google Chrome上呈现后,此特定列的外观:

<th class="ui-state-default" rowspan="1" colspan="1"><div class="DataTables_sort_wrapper">
                            Count
                        <span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-s"></span></div></th>

0 个答案:

没有答案