All geek questions in one place

JQuery Tablesorter Paging Buttons Without Shooting

I am trying 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 File (cshtml)

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

Union code

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

Common snippet _Layout.cshtml

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

Script folder

Scripts folder

The page display looks like an “attempt” to work, since only the first 10 lines are displayed. However, pagination controls do not trigger any events.

If this were useful, I can click on what I have on the github page of the site.

Here is what I'm trying to emulate: https://mottie.imtqy.com/tablesorter/docs/example-pager.html

+4
1

, , . , , , ,

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

Source: https://habr.com/ru/post/1667195/

More articles:


All Articles