jQuery表分类器寻呼机和过滤器崩溃浏览器

Question

表使用过滤器，我也想使用寻呼机。我不擅长javascript/jquery，所以我不知道出了什么问题。我知道，一旦我指定pagerOptions容器，浏览器就会崩溃。如果我将容器指定为一个不存在的容器，那么页面加载并且表工作得很好，而且页面加载时只有10个表行，所以工作正常。

我试图参考两个例子，但它们与使用pagerOption的脚本非常不同。

这个消息来源说它使用了过滤器和寻呼机。在过去的一天里，我尝试过基于此更改代码，但没有成功。此外，这个源代码似乎忘记了html和css。：/我一直在查看页面源代码，但它没有帮助。

此源仅使用寻呼机，并且脚本非常不同。我不明白为什么。

我的脚本是否有一些重写或其他什么东西，它会导致浏览器崩溃？

Gemfile.lock

jquery-tablesorter (1.12.8)
  railties (>= 3.1, < 5)

页面：

<div class="pager">
Page: <select class="gotoPage"></select>
<img src="../addons/pager/icons/first.png" class="first" alt="First" title="First page" />
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" title="Previous page" />
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<img src="../addons/pager/icons/next.png" class="next" alt="Next" title="Next page" />
<img src="../addons/pager/icons/last.png" class="last" alt="Last" title= "Last page" />
<select class="pagesize">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
    <option value="40">40</option>
</select>
</div>
<div id="container" style="width:1400px; margin-left: auto; margin-right: auto;">
<table width="100%" class="tablesorter">
<thead>
  <tr>
  <th width="40%" data-placeholder="Search">Question</th>
  <th width="12%" data-placeholder="Search">Category</th>
  <th width="6%" data-placeholder="Search">Type</th>
  <th width="9%" data-placeholder="Search">Product</th>
  <th width="8%" data-placeholder="Search">Section</th>
  <th width="8%" data-placeholder="Search">Created</th>
  <th width="8%" data-placeholder="Search">Updated</th>
  <th width="9%" class="filter-false remove sorter-false">Functions</th>
  </tr>
</thead>
<tbody>
  <%= render @questions %>
</tbody>
</table>
</div>
<script>
$(function()  {
    // For Pages!
    var pagerOptions = {
        // target the pager markup - see the HTML block below
        container: $(".pager"),
        // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
        output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
        // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
        // table row set to a height to compensate; default is false
        fixedHeight: true,
        // remove rows from the table to speed up the sort of large tables.
        // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
        removeRows: false,
        // go to page selector - select dropdown that sets the current page
        cssGoto: '.gotoPage'
    };
    $.extend($.tablesorter.themes.jui, {
        // change default jQuery uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
        table      : 'ui-widget ui-widget-content ui-corner-all', // table classes
        caption    : 'ui-widget-content ui-corner-all',
        header     : 'ui-widget-header ui-corner-all ui-state-default', // header classes
        footerRow  : '',
        footerCells: '',
        icons      : 'ui-icon', // icon class added to the <i> in the header
        sortNone   : 'ui-icon-carat-2-n-s',
        sortAsc    : 'ui-icon-carat-1-n',
        sortDesc   : 'ui-icon-carat-1-s',
        active     : 'ui-state-active', // applied when column is sorted
        hover      : 'ui-state-hover',  // hover class
        filterRow  : '',
        even       : 'ui-widget-content', // odd row zebra striping
        odd        : 'ui-state-default'   // even row zebra striping
      });
    var $table = $("table")
    .tablesorter({
        theme: 'jui',
        headerTemplate : '{content} {icon}', // needed to add icon for jui theme
        widgets: ['uitheme', 'zebra', 'filter'],
        widgetOptions: {
            zebra   : ["even", "odd"],
            filter_columnFilters : true,
            filter_ignoreCase : true,
            filter_liveSearch : true,
            filter_searchDelay : 300,
            filter_reset : 'button.reset',
       }
    })
    // initialize Pager plugin
    .tablesorterPager(pagerOptions);
    // Target the $('.search') input using built in functioning
    // this binds to the search using "search" and "keyup"
    // Allows using filter_liveSearch or delayed search &
    // pressing escape to cancel the search
    $.tablesorter.filter.bindSearch( $table, $('.form-control') );
    // Basic search binding, alternate to the above
    // bind to search - pressing enter and clicking on "x" to clear (Webkit)
    // keyup allows dynamic searching
    /*
    $(".search").bind('search keyup', function (e) {
      $('table').trigger('search', [ [this.value] ]);
    });
    */
    // Allow changing an input from one column (any column) to another
    $('selectpicker').change(function(){
    // modify the search input data-column value (swap "0" or "all in this demo)
    $('.selectable').attr( 'data-column', $(this).val() );
    // update external search inputs
    $.tablesorter.filter.bindSearch( $table, $('.form-control'), false );
    });
    $("#questions").removeClass('tablesorter tablesorter-jui');
});
</script>
<script src="/assets/bootstrap-select.js"></script>
<script type="text/javascript">
$('.selectpicker').selectpicker({
  });
</script>

Answer 1

感谢Mottie&TheSin！

页面选择器导致错误。因此，将cssGoto:更改为.gtoPage以外的任何类都会使其工作。我正在删除页面选择器，无论如何我都不需要它。

我更改了

cssGoto: '.gotoPage'

到

cssGoto: '.pagenum'

我想把.pager选择类也改为"pagenum"，但只在离开"gotoPage"时才起作用