Question

我已经google了，我在我的代码中更改了不同的东西，下载了不同版本的tablesorter和jQuery，仍然无法让jQuery tablesorter与jsRender生成的表一起使用。有人遇到过这个吗？我在一个论坛上找到了一个有问题的人，他说他通过在他的模板中插入脚本标签来解决这个问题......我无法让它工作。谁能帮我？我喜欢MVC的jsRender的轻松，我不想走另一条路。任何想法，想法，解决方法？

最糟糕的部分 - 我在那里放了一个静态表，它运行正常。

我尝试过啤酒，这看起来确实有效，但对我的申请没有帮助。

_Layout.cshtml：

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Test Manager</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/common")
    @RenderSection("scripts", required: false)
    <link href="~/css/theme.default.css" rel="stylesheet">
    <script src="~/js/jquery.tablesorter.min.js" type="text/javascript"></script>
    <script src="~/js/jquery.tablesorter.widgets.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#ItemsGrid').tablesorter({
                widgets: ['zebra', 'columns'],
                usNumberFormat: false,
                sortReset: true,
                sortRestart: true
            });
        });
    </script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">...

Index.cshtml（重要的部分）：

@model FriendsList.Models.ItemsViewModel
@{
    ViewBag.Title = "Friends' Items";
}
<h2>Friends' Items</h2>
<div id="page-messages"></div>
<br /><br />
<table id="ItemsGrid" class="tablesorter">
    <thead>
        <tr>
            <th>Purchased</th>
            <th>Friend</th>
            <th>Item Name</th>
            <th>Item Link</th>
            <th>Purchaser</th>
        </tr>
    </thead>
</table>

<script type="text/x-jsrender" id="ItemsGridRowTemplate">
        <tr>
            {{if IsPurchased}}
            <td><a href="#" onclick="saveItem('{{:Id}}')"><img src="../Content/images/yes.png" style="border: 0;" /></a></td>
            {{else}}
            <td><a href="#" onclick="saveItem('{{:Id}}')"><img src="../Content/images/no.png" style="border: 0;" /></a></td>
            {{/if}}
            <td>{{>UserEmail}}</td>
            <td>{{>ItemName}}</td>
            <td>{{>ItemLink}}</td>
            <td>{{>PurchaserEmail}}</td>
        </tr>
</script>
<script type="text/javascript">

    var isEditMode = false;
    var currentItemEditing;
    var Items;

    $(function () {
        displayItemsGrid();
    });

    function displayItemsGrid() {     /* New function */
        $.ajax({
            url: '/FriendsItems/GetItems/',
            type: 'GET',
            cache: false,
            contentType: 'application/json; charset=UTF-8'
        }).done(function (result) {
            Items = result;
            $('#ItemsGrid').find("tr:gt(0)").remove();
            var htmlGridRows = $('#ItemsGridRowTemplate').render(Items);
            var newHtml = "<tbody>" + htmlGridRows + "</tbody>";
            $('#ItemsGrid').append(newHtml);
        });
    }
</script>

Answer 1

添加

    $(function () {
        $('#ItemsGrid').tablesorter({
            widgets: ['zebra', 'columns'],
            usNumberFormat: false,
            sortReset: true,
            sortRestart: true
        });
    });

到displayItemsGrid()结束时就可以了。

jQuery Tablesorter和动态表

1 个答案: