I'm attempting to add pagination to my table control using jquery.tablesorter.pager.js.

Javascript file

/*global my */ my.Views.EndingSoon = (function ($) { "use strict"; var pagerOptions = { container: $("#pager"), output: '{startRow:input} – {endRow} / {totalRows} rows', updateArrows: true, page: 0, size: 10, savePages: true, storageKey: 'tablesorter-pager', pageReset: 0, fixedHeight: true, removeRows: false, countChildRows: false, cssNext: '.next', // next page arrow cssPrev: '.prev', // previous page arrow cssFirst: '.first', // go to first page arrow cssLast: '.last', // go to last page arrow cssGoto: '.gotoPage', // select dropdown to allow choosing a page cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option cssDisabled: 'disabled', // Note there is no period "." in front of this class name cssErrorRow: 'tablesorter-errorRow' // ajax error information row }; var init = function init() { $("table") .tablesorter({ theme: 'blue', widthFixed: true, widgets: ['zebra', 'filter'] }) .tablesorterPager(pagerOptions); } return { init: init }; })(this.jQuery);

View (cshtml) file

<table class="tablesorter"> <thead> <tr> <th>Auction Source</th> <th>Short Description</th> <th style="width: 100px">Current Price</th> <th style="width: 125px">Next Required<br />Bid Amount</th> <th>Number of Bids</th> <th>Auction End</th> </tr> </thead> <tbody> @foreach (AuctionItem item in Model.AuctionItems) { <tr> <td>@item.Auction.AuctionSource</td> <td><a target="_blank" href="@item.AuctionItemURL" title="@item.FullDescription">@Truncate(string.IsNullOrEmpty(item.ShortDescription) ? item.FullDescription : item.ShortDescription, 100)</a></td> <td>@item.CurrentPrice.ToString("C")</td> <td>@item.NextBidRequired.ToString("C")</td> <td>@item.NumberOfBids</td> <td>@(item.EndDateTime != DateTime.MinValue ? item.EndDateTime : item.Auction.AuctionEndDate)</td> </tr> } </tbody> </table> <div id="pager" class="pager tablesorter-pager"> <img src="@Url.Content("~/Content/Images/first.png")" class="first" /> <img src="@Url.Content("~/Content/Images/prev.png")" class="prev" /> <!-- the "pagedisplay" can be any element, including an input --> <span class="pagedisplay" data-pager-output-filtered="{startRow:input} – {endRow} / {filteredRows} of {totalRows} total rows"></span> <img src="@Url.Content("~/Content/Images/next.png")" class="next" /> <img src="@Url.Content("~/Content/Images/last.png")" class="last" /> <select class="pagesize"> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="all">All Rows</option> </select> <select class="gotoPage" title="Select page number"> </select> </div>

Bundling Code

bundles.Add(new ScriptBundle("~/bundles/jquerytablesorter").Include( "~/Scripts/jquery.tablesorter.js", "~/Scripts/jquery.tablesorter.combined.js", "~/Scripts/jquery.tablesorter.pager.js"));

Shared _Layout.cshtml Snippet

@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jquerytablesorter") @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/my-js") @Scripts.Render("~/bundles/bootstrap") </head> <body>

Scripts Folder

The pagination appears to be 'trying' to work, as only the first 10 rows are displayed. However, the pagination controls don't trigger any events.

If it'd be helpful, I can push what I have up to the site's github page.

This is what I'm attempting to emulate: https://mottie.github.io/tablesorter/docs/example-pager.html