jQuery-tablesorter pager and filter crashing browser

Question

The table uses the filters and I want to use the pager as well. I am not skilled in javascript/jquery so I do not know what is wrong. I do know that as soon as I specify the pagerOptions container the browser crashes. If I specify the container to a non existing one the page loads and the table works great, also the page does load with only 10 table rows so something is working right.

There are two examples I am trying to reference but they are very different with the script to use the pagerOption.

This source says it uses filter and pager. I have tried changing my code based on this for the past day with no luck. Also, this source seemed to forget the html and css. :/ I have been viewing the page source but its not helpful.

This source uses the pager only, and the scripts are very different. I do not understand why.

Does my script have some overriding or something, its crashing the browser?

Gemfile.lock

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

The Page:

<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

Thanks to Mottie & TheSin!

The page selector is causing an error. So changing the cssGoto: to any class other than .gotoPage will make it work. I am removing the page selector, I didn't need it anyway.

I changed the

cssGoto: '.gotoPage'

to (anything but '.gotoPage')

cssGoto: '.pagenum'

I wanted to change the .pager select class as well to "pagenum" but it only worked leaving the "gotoPage"