jQuery Tablesorter分页按钮不会被触发

时间：2017-01-18 23:04:44

标签： javascript jquery asp.net-mvc tablesorter

我尝试使用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>

脚本文件夹

分页似乎是在尝试＆＃39;工作，因为只显示前10行。但是，分页控件不会触发任何事件。

如果它有用，我可以将我所拥有的内容推送到网站的github页面。

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

1 个答案:

答案 0 :(得分：1)

看起来寻呼机并不喜欢我传递的选项之一。我仍然不确定哪个是罪魁祸首，但是，现在我正在努力工作。 m传递一个选项，没有变量：

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