I've googled, I've changed different things in my code, downloaded different versions of tablesorter and jQuery, and still cannot get the jQuery tablesorter to work with a jsRender generated table. Has anyone come across this? I've found one guy on some forum who had an issue and he said he worked around it by plugging the script tags in his template... I can't get that to work. Can anyone help me? I love the ease of jsRender with MVC and I don't want to have to go a different route. Any ideas, thoughts, workarounds?
Worst part -- I put a static table in there and it works fine.
I've tried beer and that does seem to work but doesn't help my application.
_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 (part that matters):
@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>
Adding
To the end of
displayItemsGrid()did the trick.