jquery tablesorter 滚动条未设置高度

Question

我正在使用最新版本的 laravel。我正在尝试使用一个高度仅为 300px 的带有 tablesorter 的桌子。无论我做什么，滚动条似乎都被忽略了。结果是一个表格的高度是整个浏览器窗口的高度，而不是 300 像素。

这是我的脚本和 CSS 链接：

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

这是我的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_'
    }
  });
})

还有我的桌子：

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

Answer 1

您缺少 widget-scroller 的导入

将此脚本导入到您的代码中，它应该可以工作

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