Ich versuche, mit jquery.tablesorter.pager.js Paginierung zu meinem Tabellensteuerelement hinzuzufügen.jQuery Tablesorter Paginierungsschaltflächen werden nicht ausgelöst

Javascript-Datei

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

Ansicht (cshtml) Datei

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

Bündelung-Code

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

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

Ordner

Scripts

Die Paginierung ‚versucht‘ zu arbeiten, da nur die ersten 10 Zeilen angezeigt zu werden angezeigt. Die Paginierungssteuerelemente lösen jedoch keine Ereignisse aus.

Wenn es hilfreich wäre, kann ich auf die Github-Seite der Website schieben, was ich habe.

Dies ist, was ich bin versucht zu emulieren. https://mottie.github.io/tablesorter/docs/example-pager.html

Quelle

2017-01-18 NickHeidke

ich damit nicht sehr vertraut bin, aber ich habe Sie haben einen schnellen „F12 dev Tools“ Blick auf diesem Mottie Link. Ich habe in ihrem Beispiel bemerkt, dass sie kein

Wird die Datei 'jquery.tablesorter.pager.js 'nach jQuery & tablesorter geladen? – Mottie

Ich habe gerade versucht, das Formular-Tag zu entfernen, kein Glück. Ich kann sehen, dass die pager.js-Datei nach jQuery und tablesorter aufgeführt ist, wenn ich es debugge. Ich habe auch meine Bündelung Logik für die Überprüfung enthalten. Danke für die Hilfe bis jetzt. – NickHeidke

Es scheint, dass der Pager nicht eine der Optionen, wie habe ich nebenbei wurde ich bin immer noch nicht sicher, welche der Täter war, aber, es funktioniert jetzt, dass ich in einer einzigen Option bin vorbei, ohne eine Variable:

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

Quelle

2017-01-24 13:37:01 NickHeidke

Ich bin nicht sicher, warum es ein Problem gibt, aber Sie können jede der Standardoptionen ändern, bevor Sie den Pager initialisieren, indem Sie den Wert in '$ .tablesorterPager.defaults' ändern. – Mottie

jQuery Tablesorter Paginierungsschaltflächen werden nicht ausgelöst

Javascript-Datei

Ansicht (cshtml) Datei

Bündelung-Code

Geteilt _Layout.cshtml Snippet

Scripts

Antwort

Verwandte Themen