I'm trying to implement tablesorter with the pager function. I imported all the js files provided on the tablesorter website. Here I have my 'head' section of my Html file:
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="/js/jquery.tablesorter.pager.min.js"></script>
<script src="/js/jquery.tablesorter.min.js"></script>
<script src="/js/jquery.tablesorter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js" integrity="sha512-qzgd5cYSZcosqpzpn7zF2ZId8f/8CHmFKZ8j7mU4OUXTNRd5g+ZHBPsgKEwoqxCtdQvExE5LprwwPAgoicguNg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
<script type="text/javascript">
$(function() {
$("#myTable")
.tablesorter({
theme : "bootstrap",
sortList: [[0, 0]]
},
widthFixed: true
})
.tablesorterPager({
size: 2,
container: $("#myContainer")
});
});
</script>
</head>
With the following table:
<table class="table table-bordered table-striped" id="myTable">
<thead class="thead-dark">
<tr>
<th scope="col">№</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<th colspan="3" class="ts-pager" id="myContainer">
...
</th>
</tr>
</tfoot>
</table>
However, I get this error:
$(...).tablesorter(...).tablesorterPager is not a function
What's wrong? I do everything like in the demo section and in youtube tutorials but this error appears and can't realize why.