Visualforceのpageblocktableで列のソート機能を実装したい

実現したいこと

前提

既存のVisualforce画面にpageblocktableがあり、これに列のソート機能を実装したいです。

https://salesforce.oikeru.com/entry/vf/sfdc_jquery_datatables
上記サイトを参考に実装を試みたのですが、うまくいっておりません。
悪い点を指摘いただけないでしょうか。

該当のソースコード

Visualforce
1<apex:page Controller="hogehogeController" lightningStylesheets="true">
2    <apex:stylesheet value="{!URLFOR($Resource.DataTables, 'DataTables-1.13.4/css/jquery.dataTables.min.css')}" />
3    <apex:includeScript value="{!URLFOR($Resource.DataTables, 'DataTables-1.13.4/js/jquery.dataTables.min.js')}" />
4    <script>
5        $(document).ready(function () {
6            $('#pbTable').DataTable(
7                //日本語化
8                language: {
9                    url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
10                },
11                // 件数切替機能 無効
12                lengthChange: false,
13                paginate: false,
14                // ページング機能 無効
15                paging: false,
16                // 検索機能 無効
17                searching: false,
18                // 情報表示 無効
19                info:false,
20                // ソート機能 有効
21                sort: true
22            );
23        });
24    </script>
25    <apex:form id="frm">
26        <apex:pageBlock id="pb">
27            <apex:pageblockTable value="{!abcWrapperList}" var="a" id="pbTable">
28                <apex:column >
29                    <apex:inputCheckbox value="{!a.isSelected}"/>
30                </apex:column>
31                <apex:column value="{!a.aaa__c}" headerValue="aaa"/>
32                <apex:column value="{!a.bbb}"  headerValue="bbb"/>
33            </apex:pageblockTable>
34        </apex:pageBlock>
35    </apex:form>