Я пытаюсь добавить разбивку на страницы в свой элемент управления таблицей, используя jquery.tablesorter.pager.js.jQuery Tablesorter Pagination Buttons Not Firing

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

View (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"));

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 Папка

пагинацию, кажется, «пытается» работать, так как отображаются только первые 10 строк. Однако элементы управления разбиением на страницы не вызывают никаких событий.

Если было бы полезно, я могу нажать то, что у меня есть, на страницу github сайта.

Это то, что я пытаюсь подражать:. https://mottie.github.io/tablesorter/docs/example-pager.html

источник

2017-01-18 NickHeidke

Я не очень хорошо знакомы с этим, но я сделал быстрый «F12 Dev инструменты» посмотреть на эту ссылку mottie у вас есть. Я заметил в их примере, что у них нет элемента

Загружается ли файл jquery.tablesorter.pager.js после jQuery & tablesorter? – Mottie

Просто попробовал удалить тег формы, не повезло. Я вижу, что файл pager.js указан после jQuery и tablesorter при его отладке. Я также включил логику связывания для обзора. Спасибо за помощь до сих пор. – NickHeidke

Оказывается, что пейджер не нравится один из вариантов я проходящими в Я до сих пор не уверен, был преступником, но, Теперь он работает, что я передаю в одном варианте, без переменной:

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

источник

2017-01-24 13:37:01 NickHeidke

Я не уверен, почему возникает проблема, но вы можете изменить любые параметры по умолчанию перед инициализацией пейджера, изменив значение в '$ .tablesorterPager.defaults'. – Mottie

jQuery Tablesorter Pagination Buttons Not Firing

Javascript файл

View (cshtml файл)

Пакетирование код

Shared _Layout.cshtml Snippet

Scripts Папка

ответ

Смежные вопросы