CODEWITHSUNDEEP
javascriptjqueryasp.net-mvctablesorter
Nick Heidke
Nick Heidke

Reputation: 2847

jQuery Tablesorter Pagination Buttons Not Firing

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} &ndash; {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

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

Upvotes: 4

Views: 1639

Answers (1)

Nick Heidke
Nick Heidke

Reputation: 2847

It appears that the pager didn't like one of the options I was passing in. I'm still not sure which was the culprit, but, it's working now that I'm passing in a single option, without a variable:

.tablesorterPager({container: $("#endingSoonPager")});

Upvotes: 1

Related Questions