asp.net mvc中的排序表答案

【问题标题】：Sort Table in asp.net mvcasp.net mvc中的排序表
【发布时间】：2017-10-13 20:51:16
【问题描述】：

如何使用 asp.net 对表格进行排序/过滤？我不确定该怎么做，我必须使用jquery。正在研究，但我不知道如何处理这个问题。

   <table>
        <tr>
            <th class="col-lg-3 tablehead">Expense Account</th>
            <th class="col-lg-3 tablehead">Description</th>
            <th class="col-lg-3 tablehead">Requisition Number</th>
            <th class="col-lg-3 tablehead">Item Number</th>

        </tr>
        @for (int i = 0; i < Model.Count; i++)
        {

            <tr>
                <td>@Html.CheckBoxFor(m => m[i].postTrnx)</td>
               @* <td class="label">@Html.DisplayFor(m => m[i].requisitionNumber) </td>*@
                @*<td class="label">@Html.DisplayFor(m => m[i].transactionDate)</td>*@


            </tr>
            foreach (var item in Model[i].items)
            {
                @Html.HiddenFor(m => item.description)
                @Html.HiddenFor(m => item.expense_account)
                @Html.HiddenFor(m => item.itemNumber)
                <tr>
                    <td class="col-lg-3 tabledata">@item.expense_account.account_desc</td>
                    <td class="col-lg-3 tabledata">@item.description</td>
                    <td class="label">@Html.DisplayFor(m => m[i].requisitionNumber) </td>
                    <td class="col-lg-3 tabledata">@item.itemNumber</td>
                    <td class="col-sm-1 tabledata">@item.quantity</td>
                    <td class="col-sm-1 tabledata">@item.selecteduomtext </td>
                    <td class="col-sm-1 tabledata">@item.price</td>
                    <td class="col-sm-1 tabledata">@item.extended_cost</td>
                    <td class="label">@Html.DisplayFor(m => m[i].transactionDate)</td>
                    <td>@Html.ActionLink("Edit", "Edit", new { id = @item.lineNum, name = Model[i].docNumber })</td>
                </tr>

}
            }

    </table>

【问题讨论】：

页面加载时是否需要默认排序？或者您是否希望用户能够在页面加载后动态排序？还是两者兼而有之？
您可以使用 DataTables datatables.net。默认配置支持过滤和排序。它是客户端，但效果很好。
@Waragi 从班级来看，他正在使用 Bootstrap。 FooTable 比使用 Bootstrap 的 DataTables 工作得更好。
@maso 用户应该点击该列并对其进行排序
不知道footable！谢谢！

标签： c# jquery asp.net asp.net-mvc

【解决方案1】：

要让用户对 html 表进行排序，您可以使用 JQuery 插件。由于到目前为止我只使用数据表，因此我将举一个例子。有关安装说明，请参阅official website。使用很简单，只需调用即可

<script>$('table').DataTable();</script>

在您的 html 文件的末尾。

确保包含文档中描述的 DataTable 插件。

【讨论】：

我没有看到它在排序
你能描述一下当你说“排序”时你期望的行为吗？你想要什么输出？
说用户点击表头数量然后它按升序或降序或任何标题排序。
如果你想让用户通过点击自己对表格进行排序，你需要使用一个jQuery插件。您可以查看可脚印或可数据的文档。如果你在官方文档中没有找到你需要的东西，我明天会给你一个示例代码:-)
它可以在没有插件的情况下工作，但要让它工作起来会更加努力。

【解决方案2】：

由于您希望用户能够通过单击列来对表格进行排序，因此您可以按照其他人的建议使用 DataTables.net，或者您可以通过以下一般步骤自行完成：

将客户端 javascript 点击事件添加到要排序的每个列标题元素，这将调用适当的控制器操作。
添加服务器端控制器操作事件以处理服务器上的数据排序。
在点击事件中做一个ajax部分页面回调来调用服务器端动作事件。
在控制器动作事件中根据需要对数据进行排序。
在客户端 ajax 响应中更新/加载新的表格元素。
跟踪每列的当前排序顺序。

使用DataTables.net 可能更容易，因为自己动手可能需要更多的研究。

一些帮助链接：

【讨论】：