0

我正在尝试弄清楚如何使用 dynatable。目前，使用所有默认可动态设置和硬编码数据集，拥有所需的最少测试网页。

这将显示表格。但是，当我单击列标题对数据进行排序时，它不会对行进行适当的排序。相反，它复制行并将复制的行附加到表的末尾。

所以，如果我从

Animal
-----
Dog
Bird
Cat

单击动物后，我将拥有此。

Animal
------
Dog
Bird
Cat
Bird
Cat
Dog

有人可以帮我让排序正常工作吗？以下是我的代码。

动态测试.cshtml

@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
    <title>DynaTest</title>
    <link href="~/styles/jquery.dynatable.css" rel="stylesheet" />
</head>
<body style="background-color: lightgray;">
    <div>
        <form id="__AjaxAntiForgeryForm" action="#" method="post">
            @Html.AntiForgeryToken()
        </form>

        <table id="tableTestDyno">
            <thead>
                <tr>
                    <th><div style="display: none;">Actions</div></th>
                    <th>
                        Name
                    </th>
                    <th>
                        Form
                    </th>
                    <th>
                        Status
                    </th>
                    <th>
                        Date Submitted
                    </th>
                </tr>
            </thead>
        </table>

    </div>

    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/jquery.dynatable.js"></script>
    <script>
        $(document).ready(function () {
            $.ajaxSetup({
                cache: false,
                headers: { "__RequestVerificationToken": $("#__AjaxAntiForgeryForm input[name=__RequestVerificationToken]").val() }
            });
        });
    </script>
    <script>
        var records =
        [
            {
                "actions": "edit",
                "name": "Doe, Jane",
                "form": "1",
                "status": "Approved",
                "dateSubmitted": "5/28/2019 12:47 PM"
            }, {
                "actions": "edit",
                "name": "Smith, John",
                "form": "1",
                "status": "Approved",
                "dateSubmitted": "7/9/2019 7:56 AM"
            }, {
                "actions": "edit",
                "name": "Bob, Joe",
                "form": "2",
                "status": "Approved",
                "dateSubmitted": "7/9/2019 7:56 AM"
            }
        ];
        $(document).ready(function () {
            $("#tableTestDyno").dynatable({
                "dataset": {
                    records: records
                }
            });
        });
    </script>
</body>
</html>

编辑

这是测试页面的链接。https://itservices.bc3.edu/EmployeePortal/Employee/DynaTest

4

1 回答 1

0

在查看了一些更动态的示例之后，我注意到所有示例都有一个空的 tbody 是表。所以我添加了一个空的 tbody 到我的。之后它工作正常。

于 2019-07-23T18:59:25.783 回答