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