jQuery Tablesorter和動態表

我google了一下，我在我的代碼中改變了不同的東西，下載了不同版本的tablesorter和jQuery，仍然無法讓jQuery tablesorter與jsRender生成的表一起工作。有沒有人遇到過這個？我在一些論壇上發現了一個有問題的人，他說他通過在他的模板中插入腳本標籤來解決這個問題......我無法讓它工作。誰能幫我？我喜歡MVC的jsRender的輕鬆，我不想走不同的路線。任何想法，想法，解決方法？jQuery Tablesorter和動態表

最糟糕的部分 - 我把一個靜態表在那裏，它工作正常。

我試過啤酒，這似乎工作，但沒有幫助我的應用程序。

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

來源

2014-11-21 ragerory

您是否嘗試過添加更多啤酒？ – techvice 2014-11-21 02:16:47

@techvice通常它使我在事情上更好！ – ragerory 2014-11-21 02:20:46

當您拉入資源時，我沒有看到'jsrender'庫 – beautifulcoder 2014-11-21 02:24:58

添加

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

向displayItemsGrid()末奏效了。

來源

2014-11-21 05:48:51 ragerory

jQuery Tablesorter和動態表

回答

相關問題