jQuery Tablesorter 和动态表

本文关键字：动态 Tablesorter jQuery | 更新日期: 2023-09-27 18:31:14

我用谷歌搜索过，我在代码中更改了不同的东西，下载了不同版本的tablesorter和jQuery，但仍然无法让jQuerytablesorter与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>

jQuery Tablesorter 和动态表

添加 

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

最后displayItemsGrid()做到了。

相关文章：