jQuery Tablesorter 和动态表答案

【问题标题】：jQuery Tablesorter and dynamic tablesjQuery Tablesorter 和动态表
【发布时间】：2014-11-21 02:14:41
【问题描述】：

我用谷歌搜索过，我在代码中更改了不同的内容，下载了不同版本的 tablesorter 和 jQuery，但仍然无法让 jQuery tablesorter 与 jsRender 生成的表一起使用。有没有人遇到过这个？我在某个论坛上找到了一个遇到问题的人，他说他通过在他的模板中插入脚本标签来解决这个问题......我无法让它工作。谁能帮我？我喜欢 jsRender 与 MVC 的易用性，我不想走不同的路线。任何想法，想法，解决方法？

最糟糕的部分——我在里面放了一个静态表，它工作正常。

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

_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>

【问题讨论】：

你试过添加更多啤酒吗？！
@techvice 通常它会让我在事情上做得更好！
拉取资源时我没有看到jsrender 库
@beautifulcoder 它包含在 AppStart\BundleConfig.cs (Scripts.Render("~/bundles/jquery")) 的 jQuery 包中——请记住 jsRender 工作正常，不是问题.表格已填充等，只是无法让排序器与表格一起工作。

标签： c# jquery asp.net-mvc-4 tablesorter jsrender

【解决方案1】：

添加

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

到了displayItemsGrid() 的结尾，成功了。

【讨论】：