jquerytablesorterscroller

jquery tablesorter scroller not setting height


I am using latest version of laravel. I am trying to use a table with tablesorter that is only 300px tall. no matter what I do, the scroller seems to be being ignored. The result is a table that has a height the full browser window, and not 300px.

Here are my scripts and css links:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.dropbox.min.css" rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.bootstrap_4.min.css" rel='stylesheet'>

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.widgets.min.js"></script>

Here is my JS:

<script>
$(function(){
    $('.tablesorter').tablesorter({
    theme: 'dropbox',
    showProcessing: true,
    headerTemplate : '{content} {icon}',
    widgets: [ 'uitheme', 'zebra', 'filter', 'scroller' ],
    widgetOptions : {
      scroller_height : 300,
      // scroll tbody to top after sorting
      scroller_upAfterSort: true,
      // pop table header into view while scrolling up the page
      scroller_jumpToHeader: true,
      // In tablesorter v2.19.0 the scroll bar width is auto-detected
      // add a value here to override the auto-detected setting
      scroller_barWidth : null
      // scroll_idPrefix was removed in v2.18.0
      // scroller_idPrefix : 's_'
    }
  });
})

and my table:

<table class='tablesorter'>
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
    </tr>
</thead>
<tbody>
    @foreach($someArray as $k => $v)
        <tr>
            <td>{{$var1}}</td>
            <td>{{$var2}}</td>
            <td>{{$var3}}</td>
            <td>{{$var4}}</td>
            <td>{{$var5}}</td>
            <td>{{$var6}}</td>
        </tr>
    @endforeach
</tbody>

Solution

  • You are missing the import of widget-scroller

    Import this script to your code and it should work

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/widgets/widget-scroller.min.js"></script>