【问题标题】：jQuery Tablesorter Pagination Buttons Not FiringjQuery Tablesorter 分页按钮不触发
【发布时间】：2017-01-24 21:37:01
【问题描述】：

我正在尝试使用 jquery.tablesorter.pager.js 向我的表格控件添加分页。

Javascript 文件

/*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);

查看（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>

捆绑代码

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

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

脚本文件夹

分页似乎正在“尝试”工作，因为只显示了前 10 行。但是，分页控件不会触发任何事件。

如果有帮助，我可以将我拥有的内容推送到该网站的 github 页面。

这就是我试图模仿的：https://mottie.github.io/tablesorter/docs/example-pager.html

【问题讨论】：

我对此不是很熟悉，但我快速“F12 开发工具”查看了您拥有的 mottie 链接。我注意到在他们的示例中，他们没有像您那样的
元素。您是否尝试过删除它以查看是否有任何区别？另外，您是否在控制台中看到任何错误？
jquery.tablesorter.pager.js 文件是在 jQuery & tablesorter 之后加载的吗？
刚刚尝试删除表单标签，没有运气。当我调试它时，我可以看到 pager.js 文件列在 jQuery 和 tablesorter 之后。我还包括了我的捆绑逻辑以供审查。感谢您迄今为止的帮助。
你愿意使用其他插件吗？
@Mairaj 我并不完全反对它，尤其是考虑到我已经为此努力了好几个小时。你会推荐什么？

标签： javascript jquery asp.net-mvc tablesorter

【解决方案1】：

寻呼机似乎不喜欢我传入的选项之一。我仍然不确定哪个是罪魁祸首，但是，现在它正在工作，因为我传入了一个选项，没有变量：

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

【讨论】：

我不知道为什么会出现问题，但是您可以在初始化寻呼机之前修改任何默认选项，方法是更改$.tablesorterPager.defaults 中的值。